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;
    }

});