Angularjs- Azure Active Directory B2Cusing Hello.js
请参阅 https://github.com/NewtonJoshua/Azure-ADB2C-Angularjs-sample 中的示例
Web 应用程序实现使用 Hello.js ,它使用 Azure AD B2C 执行身份管理。Hello.js 是一个客户端 JavaScript SDK,用于使用 OAuth2 Web 服务进行身份验证并查询 REST API。
angular-jwt 的 jwtHelper 将负责帮助你解码令牌(JWT)并检查其到期日期。JSON Web 令牌是一种开放的,行业标准的 RFC 7519方法,用于在双方之间安全地表示索赔。
找到下面的 angularjs 示例
我们有一个 LoginController
.controller('LoginController', function($scope, $state, $ionicPopup, jwtHelper, HelloService) {
// Initialize
(function initialize() {
HelloService.initialize().then(function(authResponse) {
displayUserDetails(getUserData(authResponse));
});
})();
$scope.login = HelloService.login;
$scope.logout = HelloService.logout;
// Decode decode the token and display the user details
function getUserData(response) {
var user = {};
user.token = response.access_token || response.token;
var data = jwtHelper.decodeToken(user.token);
user.expires_in = new Date(response.expires * 1000) || response.expiresOn;
user.name = data.name;
user.email = data.emails ? data.emails[0] : '';
user.id = data.oid;
return user;
};
function displayUserDetails(user) {
$scope.user = user;
$ionicPopup.alert({
title: user.name,
template: '<b>Email:</b> ' + user.email + '<br> <b>Id:</b> <code>' + user.id + '</code>'
});
}
});
在此处输入 Azure AD B2C 设置
.value('settings', {
// ADAL-B2C configuration
adalB2C: {
tenantName: 'Enter your tenant name',
clientId: 'Enter your client id',
policy: 'Enter your policy name'
}
});
这是使用 Hello.js 实现 Azure AD B2C 的 hello.service
.service('HelloService', function(hello, $q, settings) {
var network = 'adB2CSignInSignUp';
this.initialize = function() {
//initiate all policies
hello.init({
adB2CSignIn: settings.adalB2C.clientId,
adB2CSignInSignUp: settings.adalB2C.clientId,
adB2CEditProfile: settings.adalB2C.clientId
}, {
redirect_uri: '../',
scope: 'openid ' + settings.adalB2C.clientId,
response_type: 'token id_token'
});
var adB2CSignInSignUpPolicy = getPolicyConfiguredData();
hello.init(adB2CSignInSignUpPolicy);
var authResponse = hello(network).getAuthResponse();
if (authResponse && !authResponse.error) {
return $q.when(authResponse);
} else {
var error = authResponse && authResponse.error ? authResponse.error : '';
return $q.reject(error);
}
};
this.login = function() {
hello(network).login({
display: 'page',
force: true
});
};
this.logout = function() {
hello(network).logout({
force: true
});
};
function getPolicyConfiguredData() {
var adB2CSignInSignUpPolicy = {};
adB2CSignInSignUpPolicy[network] = {
name: 'Azure Active Directory B2C',
oauth: {
version: 2,
auth: 'https://login.microsoftonline.com/tfp/' + settings.adalB2C.tenantName + '/' + settings.adalB2C.policy + '/oauth2/v2.0/authorize',
grant: 'https://login.microsoftonline.com/tfp/' + settings.adalB2C.tenantName + '/' + settings.adalB2C.policy + '/oauth2/v2.0/token'
},
refresh: true,
scope_delim: ' ',
// Don't even try submitting via form.
// This means no POST operations in <=IE9
form: false
};
adB2CSignInSignUpPolicy[network].xhr = function(p) {
if (p.method === 'post' || p.method === 'put') {
//toJSON(p);
if (typeof(p.data) === 'object') {
// Convert the POST into a javascript object
try {
p.data = JSON.stringify(p.data);
p.headers['content-type'] = 'application/json';
} catch (e) {}
}
} else if (p.method === 'patch') {
hello.utils.extend(p.query, p.data);
p.data = null;
}
return true;
};
adB2CSignInSignUpPolicy[network].logout = function() {
//get id_token from auth response
var id_token = hello(network).getAuthResponse().id_token;
//clearing local storage session
hello.utils.store(network, null);
//redirecting to Azure B2C logout URI
window.location = ('https://login.microsoftonline.com/' + settings.adalB2C.tenantName + '/oauth2/v2.0/logout?p=' + settings.adalB2C.policy + '&id_token_hint=' +
id_token + '&post_logout_redirect_uri=https://login.microsoftonline.com/' + settings.adalB2C.tenantName + '/oauth2/logout');
};
return adB2CSignInSignUpPolicy;
}
});