开源项目教程：ms-identity-javascript-react-tutorial

开源项目教程：ms-identity-javascript-react-tutorial

ms-identity-javascript-react-tutorial A chapterwise tutorial that will take you through the fundamentals of modern authentication with Microsoft identity platform in React using MSAL React 项目地址: https://gitcode.com/gh_mirrors/ms/ms-identity-javascript-react-tutorial

1. 项目的目录结构及介绍

ms-identity-javascript-react-tutorial/
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── package.json
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.js
│   ├── index.js
│   ├── components/
│   │   ├── Home.js
│   │   ├── Profile.js
│   │   └── ...
│   ├── config/
│   │   ├── authConfig.js
│   │   └── ...
│   ├── styles/
│   │   ├── App.css
│   │   └── ...
│   └── ...
└── ...

目录结构介绍

• CHANGELOG.md: 记录项目的更新日志。
• CONTRIBUTING.md: 指导如何为项目贡献代码。
• LICENSE.md: 项目的开源许可证。
• README.md: 项目的介绍和使用说明。
• package.json: 项目的依赖配置文件。
• public/: 存放静态文件，如 index.html。
• src/: 项目的源代码目录。
  • App.js: 主应用组件。
  • index.js: 项目的入口文件。
  • components/: 存放React组件。
  • config/: 存放项目的配置文件，如 authConfig.js。
  • styles/: 存放样式文件。

2. 项目的启动文件介绍

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { msalConfig } from './config/authConfig';
import App from './App';

const msalInstance = new PublicClientApplication(msalConfig);

ReactDOM.render(
  <MsalProvider instance={msalInstance}>
    <App />
  </MsalProvider>,
  document.getElementById('root')
);

文件介绍

• ReactDOM.render: 渲染React应用的入口函数。
• MsalProvider: 提供Microsoft身份验证库（MSAL）的上下文。
• msalInstance: 初始化MSAL实例，配置文件为 authConfig.js。

3. 项目的配置文件介绍

src/config/authConfig.js

export const msalConfig = {
  auth: {
    clientId: 'YOUR_CLIENT_ID',
    authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID',
    redirectUri: 'http://localhost:3000',
  },
  cache: {
    cacheLocation: 'sessionStorage',
    storeAuthStateInCookie: false,
  },
};

export const loginRequest = {
  scopes: ['User.Read'],
};

export const graphConfig = {
  graphMeEndpoint: 'https://graph.microsoft.com/v1.0/me',
};

配置文件介绍

• msalConfig: MSAL的配置对象，包含认证相关的设置。
  • clientId: 应用程序的客户端ID。
  • authority: 认证服务器的URL。
  • redirectUri: 认证成功后的重定向URL。
• loginRequest: 登录请求的配置，包含请求的权限范围。
• graphConfig: Microsoft Graph API的配置，包含请求用户信息的端点。

通过以上内容，您可以了解如何使用 ms-identity-javascript-react-tutorial 项目进行现代身份验证，并掌握项目的目录结构、启动文件和配置文件的使用。

ms-identity-javascript-react-tutorial A chapterwise tutorial that will take you through the fundamentals of modern authentication with Microsoft identity platform in React using MSAL React 项目地址: https://gitcode.com/gh_mirrors/ms/ms-identity-javascript-react-tutorial