简介

大家好，
我正在尝试将azure活动目录B2c实现到我的nuxt 3应用程序中。因为**@nuxtjs/auth-next还不适用于nuxt 3，所以我正在尝试使用@azure/msal-browser**npm包来制作我自己的可组合文件。
我写这篇文章的原因是因为它不工作。我创建的代码可以看到下面：

错误：

• • 终点站**

[硝基][开发][未处理拒绝]浏览器验证错误：非浏览器环境：在非浏览器环境中不支持登录和令牌请求。21：07：32 at BrowserAuthError. AuthError [as构造函数]

• • 浏览器控制台**

PerformanceClient. ts：100未捕获（在承诺中）类型错误：此. startPerformanceMeasurement不是性能客户端2.startMeasurement上的函数

代码：

• • 文件：/可组合文件/使用验证. js**

import * as msal from '@azure/msal-browser'

let state = {
    applicationInstance: null,  
}

export const useAuth = () => {
    //config auth
    const msalConfig = {
        auth: {
            clientId: '',
            authority: '',
            knownAuthorities: [``],
            redirectUri: '',
            knownAuthorities: ['']
        },
        cache: {
            cacheLocation: "sessionStorage", // This configures where your cache will be stored
            storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
        },
    }
    state.applicationInstance = new msal.PublicClientApplication(msalConfig);

    return {
        signIn
    }
}

const signIn = () => {
    //handle redirect
    state.applicationInstance
        .addEventCallback(event => {
            if(event.type == "msal:loginSuccess" && event.payload.account)
            {   
                const account = event.payload.account
                state.applicationInstance.setActiveAccount(account)
                console.log(account)
            }
        })

    //handle auth redirect
    state.applicationInstance
        .handleRedirectPromise()
        .then(() => {
            const account = state.applicationInstance.getActiveAccount()
            if(!account) {
                const requestParams = {
                    scopes: ['openid', 'offline_access', 'User.Read'],
                }
                state.applicationInstance.loginRedirect(requestParams)
            }
        })
}

• • 文件：索引. vue**

<script setup>
const auth = useAuth();
auth.signIn()
</script>