使用AWS Cognito时如何跳过Auth0登录页直接跳转社交登录站点

可以实现，Auth0支持在发起授权请求时直接指定目标身份提供商，绕过默认的Auth0统一登录页，直接重定向到对应社交平台的登录授权页。

1. 前期准备 #

• 先确认你需要用到的2个身份提供商已经在Auth0后台完成配置：
  • 已对接的LinkedIn（通过AWS Cognito作为OIDC IdP对接），记录下Auth0给这个IdP分配的connection名称
  • 先完成Gmail对应的Google身份提供商配置，同样记录下对应的connection名称
• 确认你的Auth0应用的回调地址、允许的发起登录域名等配置都已正确设置，避免跳转后报错。

2. 实现方式 #

方式一：使用Auth0官方SDK发起登录 #

如果你使用Auth0的前端/后端SDK，只需要在调用登录方法时传入connection参数指定对应的IdP即可，以Auth0 React SDK为例：

import { useAuth0 } from '@auth0/auth0-react';

// 跳转LinkedIn登录
const loginWithLinkedIn = () => {
  loginWithRedirect({
    connection: '你配置的LinkedIn对应的connection名称'
  });
};

// 跳转Gmail登录
const loginWithGmail = () => {
  loginWithRedirect({
    connection: '你配置的Google对应的connection名称'
  });
};

其他语言/框架的SDK逻辑一致，都是在登录参数中增加connection字段指定目标IdP。

方式二：手动拼接授权请求 #

如果没有使用SDK，直接拼接Auth0的授权端点请求参数即可，在原本的授权请求参数中增加connection参数：

https://你的Auth0域名/authorize?
  response_type=code&
  client_id=你的Auth0应用Client ID&
  redirect_uri=你配置的回调地址&
  scope=openid profile email&
  connection=对应的社交IdP的connection名称

用户访问这个拼接后的地址时，会直接跳过Auth0登录页，重定向到对应社交平台的登录授权页面。

3. 验证注意事项 #

• 首次配置完成后建议先测试跳转逻辑，确认授权完成后能正常回调到你的myApp，且能正常获取到用户身份信息
• 如果你需要同时支持账号密码登录和多个社交登录，只需要在你的myApp自行做登录入口选择，不同入口对应不同的connection参数即可

内容的提问来源于stack exchange，提问作者Sudhakar J