如何在我的 Electron React 应用程序中集成 Azure Ad B2C 登录？

Question

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

现在的问题是：我应该使用什么库将 azure AD B2c 登录集成到我的 Electron(backend)+React(frontend) App 中？ 这样用户使用 azure 门户登录和我的应用程序就可以获得一个有效的令牌。

我使用了以下 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 元素的重定向登录方法，该元素允许您通过将特定组件包装在“MsalAuthenticationTemplate”组件中来保护它们。 如果用户尚未登录，则此组件将调用 login，否则将呈现子组件。

  ‘ 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 应用程序注册中的隐式授权流，并已添加自定义公共客户端协议作为重定向 URI，例如“company:// auth'或'msal://redirect' 。 而本地开发的“ADAL 配置”应如下所示：-

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

• 由于用户交互（例如单击按钮）而调用登录的推荐方法是使用“@azure/msal-browser”直接与AuthenticatedTemplate和/或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 应用程序集成，因为电子应用程序使用 javascript 作为其基础。 请参阅以下链接以获取更多信息：-

https://docs.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