我必须处理多个登录页面/应用程序，这些页面/应用程序需要重定向到公共登录页面索引.html并且需要访问自定义字符串来识别请求的应用程序。令牌生成终结点对于所有登录页都是通用的。
场景：
-
我有多个登录页面
1：登录1.html
2：登录2.html
两个登录页面的令牌生成终结点将相同。
-
从 Azure AD B2C 应用程序成功进行身份验证后，它将重定向到常见的登陆页"http://localhost:6420"。(这是我在 azure ad b2c 应用程序门户中设置为重定向 URL 的值(。
我需要 传递一个自定义字符串，我需要识别用户当前从哪个 UI 登录，即对于辅助验证，如果用户从 login1.html 页面登录，那么我需要从登录 1 传递"log1".html并且需要在我的公共登录页面中访问此值。
我已经尝试了"状态"和"extraQueryParameters"，但不确定它们如何按照我的要求工作。
const loginRequest = {
scopes: ["openid", "profile"],
extraQueryParameters: { campaignId: 'hawaii', ui_locales: 'es' }
};
任何帮助将不胜感激。提前谢谢。
-- app-config.ts
import { Configuration } from 'msal';
import { MsalAngularConfiguration } from '@azure/msal-angular';
// this checks if the app is running on IE
export const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
export const b2cPolicies = {
names: {
signUpSignIn: "b2c_1_susi",
resetPassword: "b2c_1_reset",
},
authorities: {
signUpSignIn: {
authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_susi"
},
resetPassword: {
authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_reset"
}
}
}
export const apiConfig: {b2cScopes: string[], webApi: string} = {
b2cScopes: ['https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read'],
webApi: 'https://fabrikamb2chello.azurewebsites.net/hello'
};
export const msalConfig: Configuration = {
auth: {
clientId: "e760cab2-b9a1-4c0d-86fb-ff7084abd902",
authority: b2cPolicies.authorities.signUpSignIn.authority,
redirectUri: "http://localhost:6420/",
postLogoutRedirectUri: "http://localhost:6420/",
navigateToLoginRequestUrl: true,
validateAuthority: false,
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: isIE, // Set this to "true" to save cache in cookies to address trusted zones limitations in IE
},
}
export const loginRequest = {
scopes: ['openid', 'profile'],
extraQueryParameters: { userPage: 'Page1', ui_locales: 'es' }
};
// Scopes you enter will be used for the access token request for your web API
export const tokenRequest: {scopes: string[]} = {
scopes: apiConfig.b2cScopes // i.e. [https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read]
};
export const protectedResourceMap: [string, string[]][] = [
[apiConfig.webApi, apiConfig.b2cScopes] // i.e. [https://fabrikamb2chello.azurewebsites.net/hello, ['https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read']]
];
export const msalAngularConfig: MsalAngularConfiguration = {
popUp: !isIE,
consentScopes: [
...loginRequest.scopes,
...tokenRequest.scopes,
],
unprotectedResources: [], // API calls to these coordinates will NOT activate MSALGuard
protectedResourceMap, // API calls to these coordinates will activate MSALGuard
extraQueryParameters: { campaignId: 'hawaii', ui_locales: 'es' }
}
-- app.component.ts
import { Component, OnInit } from '@angular/core';
import { BroadcastService, MsalService} from '@azure/msal-angular';
import { Logger, CryptoUtils } from 'msal';
import { isIE, b2cPolicies } from './app-config';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Azure AD B2C';
isIframe = false;
loggedIn = false;
constructor(private broadcastService: BroadcastService, private authService: MsalService) { }
ngOnInit() {
this.isIframe = window !== window.parent && !window.opener;
this.checkAccount();
// event listeners for authentication status
this.broadcastService.subscribe('msal:loginSuccess', (success) => {
// We need to reject id tokens that were not issued with the default sign-in policy.
// "acr" claim in the token tells us what policy is used (NOTE: for new policies (v2.0), use "tfp" instead of "acr")
// To learn more about b2c tokens, visit https://learn.microsoft.com/en-us/azure/active-directory-b2c/tokens-overview
if (success.idToken.claims['acr'] !== b2cPolicies.names.signUpSignIn) {
window.alert("Password has been reset successfully. nPlease sign-in with your new password");
return this.authService.logout()
}
console.log('login succeeded. id token acquired at: ' + new Date().toString());
console.log(success);
this.checkAccount();
});
this.broadcastService.subscribe('msal:loginFailure', (error) => {
console.log('login failed');
console.log(error);
// Check for forgot password error
// Learn more about AAD error codes at https://learn.microsoft.com/en-us/azure/active-directory/develop/reference-aadsts-error-codes
if (error.errorMessage.indexOf('AADB2C90118') > -1) {
if (isIE) {
this.authService.loginRedirect(b2cPolicies.authorities.resetPassword);
} else {
this.authService.loginPopup(b2cPolicies.authorities.resetPassword);
}
}
});
// redirect callback for redirect flow (IE)
this.authService.handleRedirectCallback((authError, response) => {
if (authError) {
console.error('Redirect Error: ', authError.errorMessage);
return;
}
console.log('Redirect Success: ', response);
});
this.authService.setLogger(new Logger((logLevel, message, piiEnabled) => {
console.log('MSAL Logging: ', message);
}, {
correlationId: CryptoUtils.createNewGuid(),
piiLoggingEnabled: false
}));
}
// other methods
checkAccount() {
this.loggedIn = !!this.authService.getAccount();
}
login() {
if (isIE) {
this.authService.loginRedirect();
} else {
this.authService.loginPopup();
}
}
logout() {
this.authService.logout();
}
}
state是你应该使用的。
https://learn.microsoft.com/en-us/azure/active-directory/develop/msal-js-pass-custom-state-authentication-request
由 OAuth 2.0 定义的状态参数包含在身份验证请求中，也会在令牌响应中返回，以防止跨站点请求伪造攻击。默认情况下，Microsoft JavaScript 身份验证库 (MSAL.js( 在身份验证请求中传递随机生成的唯一状态参数值。
state 参数还可用于在重定向之前对应用状态的信息进行编码。可以将用户在应用中的状态(例如他们所在的页面或视图(作为此参数的输入传递。MSAL.js 库允许你将自定义状态作为请求对象中的状态参数传递
发送请求时，传入状态将追加到 MSAL 设置的唯一 GUID .js。返回响应时，MSAL.js 检查状态匹配项，然后将响应对象中传入的自定义状态作为 accountState 返回。
let loginRequest = {
scopes: ["user.read", "user.write"],
state: "page_url"
}
myMSALObj.loginPopup(loginRequest);
// ...
export type AuthResponse = {
uniqueId: string;
tenantId: string;
tokenType: string;
idToken: IdToken;
accessToken: string;
scopes: Array<string>;
expiresOn: Date;
account: Account;
accountState: string;
};