通过auth0实现google登录和apple登录以及emal登录

客户端传 code 给后端换 token（清晰流程）

[前端跳转到 Auth0 登录页面（response_type=code）]
      |
      v
[用户登录后，Auth0 回调前端页面 /fe-login-callback?code=xxx]
      |
      v
[前端拿到 code 后，请求你后端 API：/api/auth/code-login?code=xxx]
      |
      v
[后端用 code 请求 Auth0 换取 id_token]
      |
      v
[后端解析 id_token → 登录或注册用户 → 生成你系统的 token]
      |
      v
[后端返回 token 给前端，前端存储并跳转]

 

 

 

✅ 步骤一：创建 Google OAuth 应用

  • 打开 Google Cloud Console

  • 创建一个项目（或选一个已有的）

  • 在左侧导航中选择 API 与服务 > 凭据

  • 点击“创建凭据” → OAuth 客户端 ID

填写信息：

  • 应用类型：选择 Web 应用

  • 名称：例如 Auth0 Web Login

  • 已授权的 JavaScript 来源：

    • https://YOUR_DOMAIN.auth0.com

  • 已授权的重定向 URI：

    • https://YOUR_DOMAIN.auth0.com/login/callback

👉 YOUR_DOMAIN 是你的 Auth0 域名，比如：your-tenant.us.auth0.com

创建后，记录下：

  • Client ID

  • Client Secret

✅ 步骤二：配置 Auth0 启用 Google 登录

  1. 登录 Auth0 控制台 → Connections > Social

  2. 找到 “Google / Google OAuth 2.0”，点击进入

  3. 输入刚才获取的：

    • Client ID

    • Client Secret

  4. 勾选你的 Default App 应用

  5. 点击“保存”

🔧 你也可以用 Auth0 提供的默认开发凭证，但生产环境建议用自己的。

 

✅ 步骤三：验证 Google 登录是否开启

  1. 访问你的登录页面，例如 /login

  2. 应该能看到按钮：“Continue with Google”

  3. 点击它，应该能跳转到 Google 登录页面，授权成功后跳转回 /callback

 

✅ 步骤四：Flask 后端无需变更（使用通用 Auth0 流程）

只要你已经实现了 Auth0 的 OAuth 流程，前端用户选择 Google 登录的结果会由 Auth0 接管并统一处理。

你的 Flask 回调接口 /callback 无需区分是 Google 登录还是用户名密码登录。

 

 

 

Apple后台配置

✅ 一、Apple Developer 后台配置（一次性操作）

步骤 1：创建 App ID（或使用已有 App ID）

1.登录 Apple Developer 控制台：

https://developer.apple.com/account/resources/identifiers/list

2.创建一个 App ID，确保启用了 Sign In with Apple

 

步骤 2：配置服务 ID（Service ID）

 

1.在左侧选择【Identifiers】，点击 + 创建一个新的 Service ID。

2.填写名称和 identifier，比如 com.pickwant.auth（这就是你的 client_id）

3.创建后点击它，开启“Sign In with Apple”。

4.添加你的 回调 URL（Redirect URI）例如：

https://dev-j60iiqp6h56jufxs.us.auth0.com/login/callback

 

 

 

 

 

步骤 3：创建并下载私钥（Client Secret）

1.进入页面：https://developer.apple.com/account/resources/authkeys/list

创建一个新的 Sign In with Apple 密钥（Key）。

2.下载 .p8 文件。

3.记下以下信息：

  • Key ID

  • Team ID（你账号的团队 ID）

  • Client ID（你的 Service ID，如 com.pickwant.auth）

 

✅ 二、Auth0 后台配置 Apple 登录（Social Connections）

步骤 1：启用 Apple 登录

  1. 登录 Auth0 控制台：https://manage.auth0.com/

  2. 前往：Authentication → Social → Apple

  3. 填写以下信息：

 

 

　　4.Callback URL 一般默认是：　　

https://YOUR_AUTH0_DOMAIN/login/callback

 

步骤 2：设置 Application 的 Allowed Callback URLs

  1. 进入你的 Auth0 应用设置页。

  2. 设置 Allowed Callback URLs 为：

　　　　

https://dev-j60iiqp6h56jufxs.us.auth0.com/login/callback

 

✅ 三、前端跳转到 Apple 登录（带 connection=apple）

https://dev-j60iiqp6h56jufxs.us.auth0.com/authorize?
response_type=code&
client_id=你的Auth0应用Client ID&
redirect_uri=https://dev-j60iiqp6h56jufxs.us.auth0.com/login/callback&
scope=openid email profile&
connection=apple&
state=your_custom_state

 

运行html:

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Auth0 多方式登录</title>
</head>
<body>
  <h2>选择登录方式</h2>

  <button onclick="loginWithProvider('google-oauth2')">使用 Google 登录</button>
  <button onclick="loginWithProvider('apple')">使用 Apple 登录</button>
  <button onclick="loginWithProvider()">使用邮箱登录</button> <!-- 👈 不指定 provider -->

  <script>
    function loginWithProvider(provider) {
      const domain = "dxxxxxsvtpkwfz0rls6yh.us.auth0.com";
      const clientId = "kxxxxf35J5lKbbJHIEAL8lJmWQlvhJe";
      const redirectUri = encodeURIComponent("http://localhost:3000/login/callback");
      const scope = "openid email profile";

      let connectionParam = "";
      if (provider) {
        connectionParam = `&connection=${provider}`;
      }

      const auth0Url =
        `https://${domain}/authorize` +
        `?response_type=code` +
        `&client_id=${clientId}` +
        `&redirect_uri=${redirectUri}` +
        `&scope=${scope}` +
        connectionParam +
        `&state=${provider || 'email'}`;

      window.location.href = auth0Url;
    }
  </script>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted on 2025-06-03 16:41  星河赵  阅读(208)  评论(0)    收藏  举报

导航