17
azure-active-directory #azure- active- directory

azure-active-directory - RIP Tutorial · Azure Active Directory B2C-Implementierung mit ADAL Cordova Plugin 8 Azure AD B2C 8. Mobile App - ADAL-Plugin 8 ... ionic serve App: 1. Plattformen

  • Upload
    others

  • View
    70

  • Download
    0

Embed Size (px)

Citation preview

azure-active-directory

#azure-

active-

directory

Inhaltsverzeichnis

Über 1

Kapitel 1: Erste Schritte mit dem azure-active-Verzeichnis 2

Bemerkungen 2

Examples 2

Installation oder Setup 2

Azure Active Directory B2C - Setup 2

Passen Sie die Azure AD B2C-Benutzeroberfläche an 2

Kapitel 2: Azure Active Directory B2C 4

Einführung 4

Examples 4

Azure AD B2C - Angularjs-Beispielanwendung (Web und Mobile) 4

Azure AD B2C 4

Web-App - Hello.js 4

Mobile App - ADAL-Plugin 4

JWT decodieren 4

1. Projektaufbau: 4

2. AD-Einrichtung: 5

3. AD-Einstellungen: 5

4. Führen Sie dieses Beispiel aus: 5

Web-App: 5

App: 6

5. Passen Sie die Azure AD B2C-Benutzeroberfläche an 6

Implementierung: 6

Web-App 7

App 7

Zugehörige Unterlagen: 7

Kapitel 3: Azure Active Directory B2C-Implementierung mit ADAL Cordova Plugin 8

Examples 8

Azure Active Directory B2C-Implementierung mit ADAL Cordova Plugin 8

Azure AD B2C 8

Mobile App - ADAL-Plugin 8

Kapitel 4: Azure Active Directory B2C-Implementierung mit Hello.js 11

Examples 11

Angulars - Azure Active Directory B2Cusing Hello.js 11

Credits 14

Über

You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: azure-active-directory

It is an unofficial and free azure-active-directory ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official azure-active-directory.

The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners.

Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to [email protected]

https://riptutorial.com/de/home 1

Kapitel 1: Erste Schritte mit dem azure-active-Verzeichnis

Bemerkungen

Dieser Abschnitt bietet einen Überblick über das aktuelle Azure-Active-Verzeichnis und warum ein Entwickler es verwenden möchte.

Es sollte auch alle großen Themen innerhalb des azure-active-Verzeichnisses erwähnen und auf die verwandten Themen verweisen. Da die Dokumentation für azure-active-directory neu ist, müssen Sie möglicherweise erste Versionen dieser verwandten Themen erstellen.

Examples

Installation oder Setup

Detaillierte Anweisungen zum Einrichten oder Installieren des Azure-Active-Verzeichnisses.

Azure Active Directory B2C - Setup

Erstellen Sie ein Azure AD B2C-Verzeichnis

Beachten Sie den Domain - Namen, es wird als tenantName verwendet werden.

1.

Registrieren Sie Ihre Anwendung Folgen Sie den Anweisungen, um eine Anwendung zu erstellen, und aktivieren Sie sowohl Web App als auch den systemeigenen Client. Siehe Registrieren einer Webanwendung und Registrieren einer mobilen / nativen Anwendung

Geben Sie die Antwort-URL als http: // localhost: 8100 oder einen beliebigen Port ein, von dem aus Sie Ihre App bereitstellen.

In Anwendungs Ansprüche, Adressen zu wählen E - Mail.

Notieren Sie die Anwendungs-ID . Es wird als clientId verwendet .

2.

Erstellen Sie eine Anmelde- oder Anmelderichtlinie

Notieren Sie den Namen der Richtlinie. Es wird als Richtlinie verwendet .

3.

Erstellen Sie eine Richtlinie zum Zurücksetzen des Kennworts

Notieren Sie den Namen der Richtlinie. Es wird als Passwort-Reset-Richtlinie verwendet

4.

Passen Sie die Azure AD B2C-Benutzeroberfläche an

Der Azure AD B2C-Anmeldebildschirm kann an unser Branding angepasst werden. Siehe

https://riptutorial.com/de/home 2

Anpassen der Benutzeroberfläche

Siehe https://github.com/NewtonJoshua/Azure-ADB2C-Angularjs-sample

In diesem Beispiel haben wir zwei benutzerdefinierte UI-Bildschirme:

AD B2C Anmelden ansd Anmeldeseite: adCustomPages / unified.html•Seite zum Zurücksetzen des B2C-Kennworts: adCustomPages / resetpassword.html•

Geben Sie in adCustomPages / unified.html in Zeile 442 und 445 Ihren Mandantennamen, Ihre Kennwort-Reset-Richtlinie und Ihre Client-ID ein

Die Seiten sollten in einem Blob hochgeladen werden, und ihre URL sollte in den Azure AD B2C-Richtlinien angegeben werden.

Erstellen Sie ein Speicherkonto wie in Beispielinhalt zum Azure Blob-Speicher hochladen beschrieben

Laden Sie die AD-Beispielseiten in den Container und notieren Sie sich deren URL.•Erstellen Sie für das erstellte Blob-Service-Speicherkonto eine CORS-Regel mit '*' als ALLOWED ORIGINS. Wählen Sie alle unter ERLAUBTE METHODEN aus. Geben Sie auch * für ERLAUBTE KOPFHÖRER und BELICHTETE KOPFHÖRER ein.

Passen Sie Ihre Richtlinie an•

Jetzt können Sie in Ihrer Anwendung die angepasste Benutzeroberfläche sehen.

Erste Schritte mit dem azure-active-Verzeichnis online lesen: https://riptutorial.com/de/azure-active-directory/topic/5465/erste-schritte-mit-dem-azure-active-verzeichnis

https://riptutorial.com/de/home 3

Kapitel 2: Azure Active Directory B2C

Einführung

Azure AD B2C ist eine Cloud-Identity-Management-Lösung für Ihre Web- und mobilen Anwendungen. Es handelt sich um einen hoch verfügbaren globalen Service, der sich auf Hunderte Millionen Identitäten skalieren lässt.

Examples

Azure AD B2C - Angularjs-Beispielanwendung (Web und Mobile)

In diesem Beispiel wird die Verwendung von AD B2C zum Sichern einer AngularJS-basierten Web- und Mobile-App veranschaulicht.

Siehe https://github.com/NewtonJoshua/Azure-ADB2C-Angularjs-sample

Azure AD B2C

Azure AD B2C ist eine Cloud-Identity-Management-Lösung für Ihre Web- und mobilen Anwendungen. Es handelt sich um einen hoch verfügbaren globalen Service, der sich auf Hunderte Millionen Identitäten skalieren lässt.

Web-App - Hello.js

Die Implementierung von Webanwendungen verwendet Hello.js , das das Identitätsmanagement mit Azure AD B2C durchführt. Hello.js ist ein clientseitiges JavaScript-SDK zur Authentifizierung mit OAuth2-Webdiensten und zum Abfragen von REST-APIs.

Mobile App - ADAL-Plugin

Bei der mobilen App-Implementierung wird der ADAL Cordova Plugin Patch für B2C verwendet . Dies ist eine gehackte Version des ADAL-Plugins (Active Directory Authentication Library) für Apache Cordova-Apps ( Cordova-Plugin-ms-adal) , das mit Azure AD B2C funktioniert. Das ursprüngliche Cordova-Plugin-MS-Adal-Plugin bietet eine einfach zu verwendende Authentifizierungsfunktion für Ihre Apache Cordova-Apps, indem Sie Active Directory nutzen.

JWT decodieren

jwtHelper von angle -jwt hilft Ihnen dabei, das Token (JWT) zu decodieren und das Ablaufdatum zu überprüfen. JSON-Web-Token sind eine offene RFC 7519- Methode nach Industriestandard für die sichere Darstellung von Ansprüchen zwischen zwei Parteien.

1. Projektaufbau:

https://riptutorial.com/de/home 4

Klonen oder laden Sie dieses Repository herunter

git clone https://github.com/NewtonJoshua/Azure-ADB2C-Angularjs-sample.git

1.

Abhängigkeiten installieren

npm install

bower install

2.

2. AD-Einrichtung:

ADAL-B2C-Konfiguration

Erstellen Sie ein Azure AD B2C-Verzeichnis

Beachten Sie den Domain - Namen, es wird als tenantName verwendet werden.

1.

Registrieren Sie Ihre Anwendung Folgen Sie den Anweisungen, um eine Anwendung zu erstellen, und aktivieren Sie sowohl Web App als auch den systemeigenen Client. Siehe Registrieren einer Webanwendung und Registrieren einer mobilen / nativen Anwendung

Geben Sie die Antwort-URL als http: // localhost: 8100 oder einen beliebigen Port ein, von dem aus Sie Ihre App bereitstellen.

In Anwendungs Ansprüche, Adressen zu wählen E - Mail.

Notieren Sie die Anwendungs-ID . Es wird als clientId verwendet .

2.

Erstellen Sie eine Anmelde- oder Anmelderichtlinie

Notieren Sie den Namen der Richtlinie. Es wird als Richtlinie verwendet .

3.

Erstellen Sie eine Richtlinie zum Zurücksetzen des Kennworts

Notieren Sie den Namen der Richtlinie. Es wird als Passwort-Reset-Richtlinie verwendet

4.

3. AD-Einstellungen:

Geben Sie in settings.value.js die folgenden Werte ein

TenantName: Domainname aus Schritt 2.1•clientId: Anwendungs-ID aus Schritt 2.2•policy: Richtlinienname aus Schritt 2.3•

4. Führen Sie dieses Beispiel aus:

Web-App:

Von Ihrer Shell oder Kommandozeile ausführen

https://riptutorial.com/de/home 5

ionic serve

App:

Plattformen hinzufügen1.

cordova platform add android

cordova platform add ios

Generieren Sie Symbol- und Begrüßungsbildschirm-Ressourcen2.

ionic cordova resources

App erstellen3.

cordova build

Weitere Informationen zum Erstellen der Apps finden Sie in den Cordova- Dokumentationen , dem Android-Plattformhandbuch und dem iOS-Plattformhandbuch

5. Passen Sie die Azure AD B2C-Benutzeroberfläche an

Der Azure AD B2C-Anmeldebildschirm kann an unser Branding angepasst werden. Siehe Anpassen der Benutzeroberfläche

In diesem Beispiel haben wir zwei benutzerdefinierte UI-Bildschirme:

AD B2C Anmelden ansd Anmeldeseite: adCustomPages / unified.html•Seite zum Zurücksetzen des B2C-Kennworts: adCustomPages / resetpassword.html•

Geben Sie in adCustomPages / unified.html in Zeile 442 und 445 Ihren Mandantennamen, Ihre Kennwort-Reset-Richtlinie und Ihre Client-ID ein

Die Seiten sollten in einem Blob hochgeladen werden, und ihre URL sollte in den Azure AD B2C-Richtlinien angegeben werden.

Erstellen Sie ein Speicherkonto wie in Beispielinhalt zum Azure Blob-Speicher hochladen beschrieben

Laden Sie die AD-Beispielseiten in den Container und notieren Sie sich deren URL.•Erstellen Sie für das erstellte Blob-Service-Speicherkonto eine CORS-Regel mit '*' als ALLOWED ORIGINS. Wählen Sie alle unter ERLAUBTE METHODEN aus. Geben Sie auch * für ERLAUBTE KOPFHÖRER und BELICHTETE KOPFHÖRER ein.

Passen Sie Ihre Richtlinie an•

Jetzt können Sie in Ihrer Anwendung die angepasste Benutzeroberfläche sehen.

Implementierung:

Wenn Sie eine Anwendung basierend auf diesem Beispiel erstellen müssen, müssen Sie die

https://riptutorial.com/de/home 6

erforderlichen Abhängigkeiten installieren.

Web-App

Abhängigkeiten:

bower install ng-hello --save

bower install angular-jwt --save

verweisen Sie auf hallo.service.js

App

Abhängigkeiten:

cordova plugin add https://github.com/jospete/azure-activedirectory-library-for-cordova --save

bower install angular-jwt --save

siehe adal.service.js

Zugehörige Unterlagen:

Übersicht: https://docs.microsoft.com/de-de/azure/active-directory-b2c/active-directory-b2c-overview

1.

Azure AD - Helfen Sie beim Schutz der einseitigen AngularJS-Apps, indem Sie Azure AD https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-devquickstarts-angular verwenden

2.

Azure AD B2C: Einseitige App-Anmeldung mit implizitem OAuth 2.0-Fluss https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-spa

3.

Azure Active Directory B2C online lesen: https://riptutorial.com/de/azure-active-directory/topic/10768/azure-active-directory-b2c

https://riptutorial.com/de/home 7

Kapitel 3: Azure Active Directory B2C-Implementierung mit ADAL Cordova Plugin

Examples

Azure Active Directory B2C-Implementierung mit ADAL Cordova Plugin

Das Beispiel finden Sie hier: https://github.com/NewtonJoshua/Azure-ADB2C-Angularjs-sample

Azure AD B2C

Azure AD B2C ist eine Cloud-Identity-Management-Lösung für Ihre Web- und mobilen Anwendungen. Es handelt sich um einen hoch verfügbaren globalen Service, der sich auf Hunderte Millionen Identitäten skalieren lässt.

Mobile App - ADAL-Plugin

Bei der mobilen App-Implementierung wird der ADAL Cordova Plugin Patch für B2C verwendet . Dies ist eine gehackte Version des ADAL-Plugins (Active Directory Authentication Library) für Apache Cordova-Apps ( Cordova-Plugin-ms-adal) , das mit Azure AD B2C funktioniert. Das ursprüngliche Cordova-Plugin-MS-Adal-Plugin bietet eine einfach zu verwendende Authentifizierungsfunktion für Ihre Apache Cordova-Apps, indem Sie Active Directory nutzen.

Nachstehend finden Sie das Beispiel für anglejs / ionicframework

Installieren Sie die Abhängigkeiten:

cordova plugin add https://github.com/jospete/azure-activedirectory-library-for-cordova --save

bower install angular-jwt --save

Lassen Sie uns einen LoginController haben

.controller('LoginController', function($scope, $state, $ionicPopup, jwtHelper, AdalService) { $scope.login = function(){ AdalService.login().then(function(authResponse) { displayUserDetails(getUserData(authResponse)); }); $scope.logout = AdalService.logout; // Decode decode the token and diaplay 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;

https://riptutorial.com/de/home 8

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

Geben Sie hier die Azure AD B2C-Einstellungen ein

.value('settings', { // ADAL-B2C configuration adalB2C: { tenantName: 'Enter your tenant name', clientId: 'Enter your client id', policy: 'Enter your policy name' } });

Und hier ist der adal.service, der Azure AD B2C mithilfe des ADAL-Plugins implementiert

angle .module ('azureADB2C') .service ('AdalService', Funktion ($ q, $ http, Einstellungen) {

var extraQueryParams = 'nux=1'; var userId = null; var redirectUri = 'https://login.microsoftonline.com/tfp/oauth2/nativeclient'; var authority = 'https://login.microsoftonline.com/' + settings.adalB2C.tenantName; var resourceUri = 'https://graph.windows.net'; this.login = function() { var deferredLoginResponse = $q.defer(); var authContext = new Microsoft.ADAL.AuthenticationContext(authority); // Attempt to authorize user silently authContext.acquireTokenSilentAsync(resourceUri, settings.adalB2C.clientId, userId, redirectUri, settings.adalB2C.policy) .then(function(authResponse) { deferredLoginResponse.resolve(authResponse); }, function() { // We require user credentials so triggers authentication dialog authContext.acquireTokenAsync(resourceUri, settings.adalB2C.clientId, redirectUri, userId, extraQueryParams, settings.adalB2C.policy) .then(function(authResponse) { deferredLoginResponse.resolve(authResponse); }, function(err) { deferredLoginResponse.reject(err); }); }); return deferredLoginResponse.promise; };

https://riptutorial.com/de/home 9

this.logout = function() { // Step1: clear cache var authContext = new Microsoft.ADAL.AuthenticationContext(authority); authContext.tokenCache.clear(); // Step2: make XmlHttpRequest pointing to the sign out url return $http.post(authority + '/oauth2/logout?post_logout_redirect_uri=' + redirectUri); }; });

Azure Active Directory B2C-Implementierung mit ADAL Cordova Plugin online lesen: https://riptutorial.com/de/azure-active-directory/topic/10770/azure-active-directory-b2c-implementierung-mit-adal-cordova-plugin

https://riptutorial.com/de/home 10

Kapitel 4: Azure Active Directory B2C-Implementierung mit Hello.js

Examples

Angulars - Azure Active Directory B2Cusing Hello.js

Siehe das Beispiel unter https://github.com/NewtonJoshua/Azure-ADB2C-Angularjs-sample

Die Implementierung von Webanwendungen verwendet Hello.js , das das Identitätsmanagement mit Azure AD B2C durchführt. Hello.js ist ein clientseitiges JavaScript-SDK zur Authentifizierung mit OAuth2-Webdiensten und zum Abfragen von REST-APIs.

jwtHelper von angle -jwt hilft Ihnen dabei, das Token (JWT) zu decodieren und das Ablaufdatum zu überprüfen. JSON-Web-Token sind eine offene RFC 7519- Methode nach Industriestandard für die sichere Darstellung von Ansprüchen zwischen zwei Parteien.

Unten finden Sie das Beispiel für anglejs

Lassen Sie uns einen LoginController haben

.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 +

https://riptutorial.com/de/home 11

'</code>' }); } });

Geben Sie hier die Azure AD B2C-Einstellungen ein

.value('settings', { // ADAL-B2C configuration adalB2C: { tenantName: 'Enter your tenant name', clientId: 'Enter your client id', policy: 'Enter your policy name' } });

Und hier ist der Service hello.service, der Azure AD B2C mit Hello.js implementiert

.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() {

https://riptutorial.com/de/home 12

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

Azure Active Directory B2C-Implementierung mit Hello.js online lesen: https://riptutorial.com/de/azure-active-directory/topic/10771/azure-active-directory-b2c-implementierung-mit-hello-js

https://riptutorial.com/de/home 13

Credits

S. No

Kapitel Contributors

1Erste Schritte mit dem azure-active-Verzeichnis

Community, Newton Joshua

2Azure Active Directory B2C

Newton Joshua

3

Azure Active Directory B2C-Implementierung mit ADAL Cordova Plugin

Newton Joshua

4

Azure Active Directory B2C-Implementierung mit Hello.js

Newton Joshua

https://riptutorial.com/de/home 14