uniapp h5安装使用MSAL实现SSO登录

1. 安装 vue-msal

使用 npm 或 yarn 安装 vue-msal 和 msal：

npm install vue-msal # 或 yarn add vue-msal
npm install vue-msal msal  # 或  yarn add vue-msal msal

2. 配置 MSAL

在项目的某个地方（比如 src/msal-config.js），你需要创建一个 MSAL 的配置对象。

export const msalConfig = {  
    auth: {  
        clientId: 'your-client-id',  
        authority: 'https://login.microsoftonline.com/your-tenant-id',  
        redirectUri: 'http://localhost:8081', // 你的应用重定向的 URI  
    },  
    cache: {  
        cacheLocation: "sessionStorage", // 或 "localStorage"  
        storeAuthStateInCookie: false, // 设置为 true 以支持 IE 和 Edge  
    },  
    // 其他配置...  
};

3. 在 Vue 应用中设置 vue-msal

在你的 Vue 应用的主文件（比如 src/main.js 或 src/main.ts）中，你需要导入 vue-msal 和你的 MSAL 配置，并设置插件。

// src/main.js 
import VueMsal from 'vue-msal';  
import { msalConfig } from '@/msal-config';
import * as Msal from 'msal';  

// 创建 MSAL 实例
// const msalInstance = new Msal.PublicClientApplication(msalConfig);  
// const msalInstance = new VueMsal.UserAgentApplication(msalConfig);  
const msalInstance = new Msal.UserAgentApplication(msalConfig);
// 创建一个 vue-msal 插件实例并设置选项  
const msalPluginOptions = {  
	auth: msalConfig.auth,  
	// interactionType: InteractionType.Redirect, // 或 InteractionType.Popup  
	// loginType: LoginType.Redirect, // 或 LoginType.Popup  
	msalInstance,  
	// 其他选项...  
};  
// 将 vue-msal 插件添加到 Vue  
Vue.use(VueMsal, msalPluginOptions); 

4. 在 Vue 组件中使用

现在你可以在你的 Vue 组件中通过 this.$msal 和 this.$msalApi 访问 MSAL 的功能了。

this.$msal.signIn();