Upload
others
View
70
Download
0
Embed Size (px)
Citation preview
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