azure - 如何将 Azure Ad B2C 登录集成到我的 Electron React 应用程序中？

Question

我正在尝试将 Azure Ad B2C 登录集成到我的 Electron React App 中。我用过MSAL-React Wrapper library对于登录真实，它在开发模式下工作正常，因为有网络服务器，但在生产中它不起作用，因为生产中没有网络服务器。我什至尝试运行这个例子 https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-node-samples/ElectronTestApp但它不适用于 Azure AD B2c 租户。另外，我应该在 Windows 上的 Electron 应用程序中使用哪个重定向 uri http://localhost:3333/或 msal3cb5f0ac-afd2-4579-9369-b26bc7212f69://auth。我尝试了这两种方法，在 azure 登录屏幕成功后，两者都显示为空屏幕。

现在的问题是:我应该使用什么库在我的 Electron(后端)+React(前端)应用程序中集成 azure AD B2c 登录？以便用户使用 azure 门户登录并且我的应用程序获得有效的 token 。

我使用了以下 MSAL 配置

export const msalConfig: Configuration = {
  auth: {
    clientId: '3cb5f0ac-afd2-4579-9369-b26bsc7212f69',
    authority:
      'https://kazureapps.b2clogin.com/kaszureapps.onmicrosoft.com/B2C_1_SignIn',
    knownAuthorities: ['kazureapps.b2clogin.com'],
    redirectUri: 'msal3cb5f0ac-afd2-4579-9369-b2s6bc7212f69://auth',
    postLogoutRedirectUri: 'msal3cb5f0ac-afd2-4579-9369-b26bc7212f69://auth',
  },
};

Answer 1

• 您可以尝试使用使用 MSAL React Wrapper 元素的重定向方法登录，该元素允许您通过将特定组件 package 在“MsalAuthenticationTemplate” 组件中来保护它们。如果用户尚未登录，此组件将调用登录，否则呈现子组件。

  ‘ import { InteractionType } from "@azure/msal-browser";
    import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

    function WelcomeUser() {
const { accounts } = useMsal();
const username = accounts[0].username;

return <p>Welcome, {username}</p>
}

 // Remember that MsalProvider must be rendered somewhere higher up in the component tree
 function App() {
return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
    </MsalAuthenticationTemplate>
  )
    }; ’

此外，完成上述操作以允许 Azure AD B2C MSAL 身份验证后，请确保允许 Azure AD B2C 应用注册中的隐式授权流，并添加自定义公共(public)客户端协议(protocol)作为重定向 URI，如 'company://auth' 或 'msal://redirect'。而本地开发的‘ADAL 配置’应如下所示:-

 ‘ adalConfig: {
tenant: 'XXXXXXXXXXX',
clientId: 'XXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
redirectUri: 'company://auth'
} ’

• 由于用户交互(例如单击按钮)而调用登录的推荐方法是使用直接与 AuthenticatedTemplate 配对的 '@azure/msal-browser'和/或 UnauthenticatedTemplate 组件分别向登录或注销用户呈现特定内容，如下例所示:-

  ‘ import { useMsal, AuthenticatedTemplate, UnauthenticatedTemplate } from "@azure/msal-react";

   function signInClickHandler(instance) {
    instance.loginRedirect();
  }

   // SignInButton Component returns a button that invokes a popup login when clicked
   function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
const { instance } = useMsal();

return <button onClick={() => signInClickHandler(instance)}>Sign In</button>
 };

  function WelcomeUser() {
const { accounts } = useMsal();
const username = accounts[0].username;

return <p>Welcome, {username}</p>
 }

  // Remember that MsalProvider must be rendered somewhere higher up in the component tree
  function App() {
   return (
    <>
        <AuthenticatedTemplate>
            <p>This will only render if a user is signed-in.</p>
            <WelcomeUser />
        </AuthenticatedTemplate>
        <UnauthenticatedTemplate>
            <p>This will only render if a user is not signed-in.</p>
            <SignInButton />
        </UnauthenticatedTemplate>
       </>
       )
    } ’

• 因此，通过执行上述指定的修改，您应该能够将 Azure AD B2C 与 Electron React 应用程序正确集成，因为 Electron 应用程序使用 javascript 作为其基础。请参阅以下链接了解更多信息:-

https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-sign-in?tabs=react#sign-in-with-redirect

https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/324