第七讲：Azure AD B2C应用集成

解密和实战 Microsoft Identity Platform https://identityplatform.xizhang.com

作者：陈希章
时间：2022年2月

课程大纲

  1. 基本概念
  2. 为单页应用程序集成 （React）
  3. 为Web应用程序集成 （Node.js）
  4. 使用Microsoft Identity 保护Web API （ASP.NET Core）
  5. 为移动或桌面应用程序集成 （Xamarin, WPF）
  6. 为守护程序或后端服务集成 (Azure function +Python，Power Automate)
  7. Azure AD B2C应用集成 (React，手机验证码登录和微信登录）
  8. 使用 Microsoft Graph API (Graph explorer & Postman)
  9. 使用 Azure AD PowerShell 模块 (PowerShell)
  10. 应用管理及最佳实践

Azure AD B2C应用集成

  1. 创建租户
  2. 选择身份提供程序
  3. 定义用户流
  4. 注册应用程序
  5. 编程访问

创建租户

  1. 需要有一个合法的订阅
  2. 会产生少量每月费用

创建租户 （续）

配置身份提供程序

添加用户流

定义用户如何注册，登录，注销，密码重置等选项



注册应用程序

  1. 该应用程序一般只用来身份验证
  2. 权限是受限的


在前端应用中调用

使用标准的 MSAL 库即可，注意 authority 和 knownAuthorities 的设置

import { render } from "react-dom";
import { PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";
import App from "./App";

const instance = new PublicClientApplication({
  auth: {
    clientId: "ffbe62b6-9f78-41fc-8ce7-e8f1a4123196",
    authority:
      "https://code365training.b2clogin.com/code365training.onmicrosoft.com/B2C_1_signup_signin",
    knownAuthorities: ["code365training.b2clogin.com"]
  },
  cache: {
    cacheLocation: "sessionStorage"
  }
});

const rootElement = document.getElementById("root");
render(
  <MsalProvider instance={instance}>
    <App />
  </MsalProvider>,
  rootElement
);

在前端应用中调用

import { useMsal } from "@azure/msal-react";
import { useState } from "react";
import { AccountInfo } from "@azure/msal-common";
import ReactJson from "react-json-view";
export default function App() {
  const { instance } = useMsal();
  const [account, setAccount] = useState<AccountInfo>();
  return (
    <div>
      <button onClick={() => {
          instance.loginPopup().then((x) => {
            if (x && x.account) setAccount(x.account);
          });}}>请登录</button>
      <hr />
      {account && <ReactJson src={account} />}
    </div>
  );
}



课程反馈

你可以通过邮件 ares@xizhang.com 与我取得联系，也可以关注 code365xyz 这个微信公众号给我留言。

视频教程

点击这里 或扫码可以访问配套视频教程。

陈希章 2022年2月 于上海

请注意github中的redirectUrl的配置 https://docs.microsoft.com/en-us/azure/active-directory-b2c/identity-provider-github?pivots=b2c-user-flow

范例 https://codesandbox.io/s/module7-spa-b2c-dnvqu