aws-amplify 内置方式重定向到 reactjs 应用程序中的 Microsoft 登录页面

Question

NOTE : I don't want to use inbuilt hostedUI page of AWS Cognito service .

I have my own custom login page with which I already integrated google and facebook login by providing two more buttons called Google Login Facebook Login .

When Google Login button is clicked, it opens directly (from my custom login page) google sign-in page with following code,

const googleLogin = async () => {

    Auth.federatedSignIn({ provider: CognitoHostedUIIdentityProvider.Google }).then(cred => {
      ...
    }).catch(e => {
      ...
    });

}

and same kind of implementation for facebook : provider: { provider: CognitoHostedUIIdentityProvider.Facebook} and it will redirect me to facebook login page.

Now, I want to integrate Auzre-Ad login to my login page. So added one more button Microsoft Azure Login

const microsofAzureLogin = async () => {

        Auth.federatedSignIn({ /* **What should I add here** */ }).then(cred => {
          ...
        }).catch(e => {
          ...
        });

}

What should I add in above code so when Microsoft Azure Login button is clicked, it redirects me to

Answer 1

It should be the name, you have given in Cognito for Microsoft, as an OIDC provider.

Which is mentioned in this document , under identity_provider param.

Add this parameter to bypass the hosted UI and redirect your user to a provider sign-in page. The value of the identity_provider parameter is the name of the identity provider (IdP) as it appears in your user pool.

---

    const azureLogin = () => {
        window.location.href = `https://${process.env.COGNITO_DOMAIN}/oauth2/authorize?
        identity_provider=${process.env.IDENTITY_PROVIDER_NAME}
        &redirect_uri=${process.env.COGNITO_REDIRECT_SIGNIN}
        &response_type=CODE
        &client_id=${process.env.COGNITO_APP_CLIENT_ID}
        &scope=${process.env.COGNITO_SCOPE}`;
      }