React + rails 应用程序 AAD 和 OpenID 连接答案

【问题标题】：React + rails Application AAD and OpenID connectReact + rails 应用程序 AAD 和 OpenID 连接
【发布时间】：2021-09-30 21:07:22
【问题描述】：

我正在开发一个使用 React（更准确地说是 nextjs）和 Ruby on rails 作为后端的应用程序。不过，我正在尝试使用 AAD 作为我的身份提供者。

我需要知道我使用 OIDC 的方法是否正确以及如何实施。

按照协议规则 (https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-protocols-oidc)，我尝试但失败的第一件事是让用户登录以获取授权码，然后将其交换到我后端的 access_token。

    window.location.assign(
      url.build({
        host: process.env.NEXT_PUBLIC_AAD_AUTHORITY,
        path: "/oauth2/v2.0/authorize",
        query: {
          response_type: "code id_token",
          client_id: process.env.NEXT_PUBLIC_AAD_CLIENT_ID,
          scope: "openid https://graph.microsoft.com/.default",
          redirect_uri: "http://localhost:3000/callback",
          response_mode: "form_post",
          nonce: code_challenge,
          code_challenge_method: "S256",
          code_challenge: code_challenge,
        },
      })
    );

由于我使用的是 OICD，所以响应方式必须是“form_post”或“fragment”。

form_data_request

我的问题是我不知道如何接收这种响应，因为我没有使用它可以的 fetch（生成 CORS 错误）。

所以....有什么想法吗？

【问题讨论】：

标签： javascript reactjs azure-active-directory openid-connect

【解决方案1】：

您使用OIDC 的方法是正确的，因为rails 完全支持OIDC。要实施，您需要在 Azure AD 中配置租户，然后在租户 Azure Active Directory 中注册一个新应用。转到 Azure 门户并单击“应用程序注册”和“新注册”。最后，移动到您的 Rails 应用程序，然后将您的应用程序与 Azure 活动目录集成。 Here 是可以指导你的完整指南。

【讨论】：