Tek sayfalı bir uygulamaya Microsoft kimlik doğrulaması oturum açma düğmesi ekleme

Bu TypeScript öğreticisine bir oturum açma/kapatma düğmesi sağlamak için Microsoft kimlik doğrulaması ekleyin. Kimlik doğrulama işlevselliği sağlamak için Azure istemci tarafı SDK 'Sı ile uygulamayı geliştirin @azure/msal-browser .

• Örnek kod

Uygulama mimarisi ve işlevleri

bu öğreticide oluşturulan SPA, aşağıdaki görevlerle bir React uygulamasıdır (create-tepki verme uygulaması):

• Office 365 veya Outlook. com gibi Microsoft tarafından desteklenen bir oturum açma kullanarak oturum açın
• Uygulamadan oturumu Kapat

Hızlı ve basit bir tek sayfalı uygulama sağlamak için örnek, TypeScript ile Create-tepki-App kullanır. Bu ön uç Framework, Azure SDK 'leriyle tipik istemci geliştirmede çeşitli kısayollar sağlar:

• Paket oluşturma, bir istemci uygulamasında kullanılan Azure SDK 'Ları için gereklidir
• Dosyadaki ortam değişkenleri .env

1. geliştirme ortamını ayarlama

Aşağıdaki yazılımın yerel bilgisayarınızda yüklü olduğunu doğrulayın.

• Etkin aboneliği olan bir Azure Kullanıcı hesabı. Ücretsiz bir tane oluşturun.
• Node.js ve NPM -yerel makinenize yüklendi.
• yerel makinenize, bash shell veya terminal ile eşdeğer bir ıde Visual Studio Code .

2. ortam değişkeni için değeri tut

Uygulama kaydınızın istemci KIMLIĞI değerini (örneğin, metin dosyası) kopyalamak için bir yer ayırın. Sonraki bölümde 5. adımda bu istemci KIMLIĞINI alacaksınız. Bu değer, Web uygulaması için bir ortam değişkeni olarak kullanılacaktır.

3. kimlik doğrulaması için uygulama kaydı oluşturma

1. Varsayılan dizinin Uygulama kayıtları için Azure Portaloturum açın .

2. + Yeni kayıt' ı seçin.

3. Aşağıdaki tabloyu kullanarak uygulama kayıt verilerinizi girin :

   Alan	Değer	Açıklama
   Ad	Simple Auth Tutorial	Bu, kullanıcının uygulamanızda oturum açtıklarında izin formunda göreceği uygulama adıdır.
   Desteklenen hesap türleri	Herhangi bir kuruluş dizinindeki (herhangi bir Azure AD dizini-çok kiracılı) hesaplar ve kişisel Microsoft hesapları	Bu, çoğu hesap türünü kapsar.
   Yeniden yönlendirme URI türü	Tek Sayfalı Uygulama (SPA)
   Yeniden yönlendirme URI değeri	http://localhost:3000	Kimlik doğrulaması başarılı veya başarısız olduktan sonra döndürülecek URL.

   

4. Kaydet’i seçin. Uygulama kayıt işleminin tamamlanmasını bekleyin.

5. Uygulama kaydının genel bakış bölümünden uygulama (istemci) kimliğini kopyalayın . Bu değeri, daha sonra istemci uygulaması için ortam değişkeniniz için ekleyeceksiniz.

4. TypeScript için React tek sayfalı uygulama oluşturma

1. Bash kabuğunda, şu dil olarak TypeScript kullanarak bir create-tepki-uygulaması oluşturun :

   npx create-react-app tutorial-demo-login-button --template typescript
   

2. Yeni dizine geçin ve @azure/msal-browser kimlik doğrulama paketini yükler:

   cd tutorial-demo-login-button && npm install @azure/msal-browser
   

3. .envKök düzeyinde bir dosya oluşturun ve aşağıdaki satırı ekleyin:

   REACT_APP_AZURE_ACTIVE_DIRECTORY_APP_CLIENT_ID=
   

   .envDosya, Create-tepki-App çerçevesinin bir parçası olarak okunurdur. Bu dosya, yerel geliştirme için istemci KIMLIĞINI depolayabileceğiniz yerdir.

4. Uygulamanızın (istemci) KIMLIĞINI değere kopyalayın.

5. oturum açma ve oturum kapatma düğmeleri ekleme

1. azureKlasörü içinde, Azure 'a özgü dosyalar için adlı bir alt klasör oluşturun ./src .

2. Adlı klasörde kimlik doğrulama yapılandırması için yeni bir dosya oluşturun azureazure-authentication-config.ts ve aşağıdaki kodda kopyalayın:

   import { Configuration, LogLevel } from "@azure/msal-browser";
   
   const AzureActiveDirectoryAppClientId: any =
     process.env.REACT_APP_AZURE_ACTIVE_DIRECTORY_APP_CLIENT_ID;
   
   export const MSAL_CONFIG: Configuration = {
     auth: {
       clientId: AzureActiveDirectoryAppClientId,
     },
     cache: {
       cacheLocation: "sessionStorage",
       storeAuthStateInCookie: false,
     },
     system: {
       loggerOptions: {
         loggerCallback: (level, message, containsPii) => {
           if (containsPii) {
             return;
           }
           switch (level) {
             case LogLevel.Error:
               console.error(message);
               return;
             case LogLevel.Info:
               console.info(message);
               return;
             case LogLevel.Verbose:
               console.debug(message);
               return;
             case LogLevel.Warning:
               console.warn(message);
               return;
           }
         },
       },
     },
   };
   

   Bu dosya, dosyadaki uygulama KIMLIĞINIZI okur .env , oturum tanımlama bilgileri yerine tarayıcı depolaması olarak ayarlar ve kişisel bilgiler considerate günlük kaydı sağlar.

3. Adlı klasörde Azure kimlik doğrulama ara yazılımı için yeni bir dosya oluşturun azureazure-authentication-context.ts ve aşağıdaki kodda kopyalayın:

   import {
     PublicClientApplication,
     AuthenticationResult,
     AccountInfo,
     EndSessionRequest,
     RedirectRequest,
     PopupRequest,
   } from "@azure/msal-browser";
   
   import { MSAL_CONFIG } from "./azure-authentication-config";
   
   export class AzureAuthenticationContext {
     private myMSALObj: PublicClientApplication = new PublicClientApplication(
       MSAL_CONFIG
     );
     private account?: AccountInfo;
     private loginRedirectRequest?: RedirectRequest;
     private loginRequest?: PopupRequest;
   
     public isAuthenticationConfigured = false;
   
     constructor() {
       // @ts-ignore
       this.account = null;
       this.setRequestObjects();
       if (MSAL_CONFIG?.auth?.clientId) {
         this.isAuthenticationConfigured = true;
       }
     }
   
     private setRequestObjects(): void {
       this.loginRequest = {
         scopes: [],
         prompt: "select_account",
       };
   
       this.loginRedirectRequest = {
         ...this.loginRequest,
         redirectStartPage: window.location.href,
       };
     }
   
     login(signInType: string, setUser: any): void {
       if (signInType === "loginPopup") {
         this.myMSALObj
           .loginPopup(this.loginRequest)
           .then((resp: AuthenticationResult) => {
             this.handleResponse(resp, setUser);
           })
           .catch((err) => {
             console.error(err);
           });
       } else if (signInType === "loginRedirect") {
         this.myMSALObj.loginRedirect(this.loginRedirectRequest);
       }
     }
   
     logout(account: AccountInfo): void {
       const logOutRequest: EndSessionRequest = {
         account,
       };
   
       this.myMSALObj.logout(logOutRequest);
     }
     handleResponse(response: AuthenticationResult, incomingFunction: any) {
       if(response !==null && response.account !==null) {
         this.account = response.account;
       } else {
         this.account = this.getAccount();
       }
   
       if (this.account) {
         incomingFunction(this.account);
       }
     }
     private getAccount(): AccountInfo | undefined {
       console.log(`loadAuthModule`);
       const currentAccounts = this.myMSALObj.getAllAccounts();
       if (currentAccounts === null) {
         // @ts-ignore
         console.log("No accounts detected");
         return undefined;
       }
   
       if (currentAccounts.length > 1) {
         // TBD: Add choose account code here
         // @ts-ignore
         console.log(
           "Multiple accounts detected, need to add choose account code."
         );
         return currentAccounts[0];
       } else if (currentAccounts.length === 1) {
         return currentAccounts[0];
       }
     }
   }
   
   export default AzureAuthenticationContext;
   

   Bu dosya, ve işlevleri olan bir kullanıcı için Azure 'da kimlik doğrulaması sağlar loginlogout .

4. Adlı klasörde Kullanıcı arabirimi düğme bileşeni dosyası için yeni bir dosya oluşturun azureazure-authentication-component.tsx ve aşağıdaki kodda kopyalayın:

   import React, { useState } from "react";
   import AzureAuthenticationContext from "./azure-authentication-context";
   import { AccountInfo } from "@azure/msal-browser";
   
   const ua = window.navigator.userAgent;
   const msie = ua.indexOf("MSIE ");
   const msie11 = ua.indexOf("Trident/");
   const isIE = msie > 0 || msie11 > 0;
   
   // Log In, Log Out button
   const AzureAuthenticationButton = ({ onAuthenticated }: any): JSX.Element => {
     // Azure client context
     const authenticationModule: AzureAuthenticationContext = new AzureAuthenticationContext();
   
     const [authenticated, setAuthenticated] = useState<Boolean>(false);
     const [user, setUser] = useState<AccountInfo>();
   
     const logIn = (method: string): any => {
       const typeName = "loginPopup";
       const logInType = isIE ? "loginRedirect" : typeName;
   
       // Azure Login
       authenticationModule.login(logInType, returnedAccountInfo);
     };
     const logOut = (): any => {
       if (user) {
         onAuthenticated(undefined);
         // Azure Logout
         authenticationModule.logout(user);
       }
     };
   
     const returnedAccountInfo = (user: AccountInfo) => {
       // set state
       setAuthenticated(user?.name ? true : false);
       onAuthenticated(user);
       setUser(user);
     };
   
     const showLogInButton = (): any => {
       return (
         <button id="authenticationButton" onClick={() => logIn("loginPopup")}>
           Log in
         </button>
       );
     };
   
     const showLogOutButton = (): any => {
       return (
         <div id="authenticationButtonDiv">
           <div id="authentication">
             <button id="authenticationButton" onClick={() => logOut()}>
               Log out
             </button>
           </div>
         </div>
       );
     };
   
     const showButton = (): any => {
       return authenticated ? showLogOutButton() : showLogInButton();
     };
   
     return (
       <div id="authentication">
         {authenticationModule.isAuthenticationConfigured ? (
           showButton()
         ) : (
           <div>Authentication Client ID is not configured.</div>
         )}
       </div>
     );
   };
   
   export default AzureAuthenticationButton;
   

   Bu düğme bileşeni bir kullanıcıya kaydedilir ve Kullanıcı hesabını çağıran/üst bileşene geri geçirir.

   Düğme metni ve işlevselliği, kullanıcının şu anda oturum açmış olması halinde, onAuthenticated bileşeni bileşene geçirilmiş bir özellik olarak yakalandığından öğesine göre geçirilir.

   Bir Kullanıcı oturum açtığında, düğme authenticationModule.loginreturnedAccountInfo geri çağırma Işlevi olarak Azure kimlik doğrulama kitaplığı yöntemini çağırır. Döndürülen kullanıcı hesabı daha sonra işlevle üst bileşene geri geçirilir onAuthenticated .

5. Dosyayı açın ./src/App.tsx ve oturum açma/kapatma düğmesi bileşenini birleştirmek için tüm kodu aşağıdaki kodla değiştirin:

   import React, { useState } from "react";
   import AzureAuthenticationButton from "./azure/azure-authentication-component";
   import { AccountInfo } from "@azure/msal-browser";
   
   function App() {
     // current authenticated user
     const [currentUser, setCurrentUser] = useState<AccountInfo>();
   
     // authentication callback
     const onAuthenticated = async (userAccountInfo: AccountInfo) => {
       setCurrentUser(userAccountInfo);
     };
   
     // Render JSON data in readable format
     const PrettyPrintJson = ({ data }: any) => {
       return (
         <div>
           <pre>{JSON.stringify(data, null, 2)}</pre>
         </div>
       );
     };
   
     // Quick link - user revokes app's permission
     const ShowPermissionRevokeLinks = () => {
       return (
         <div>
           <div><a href="https://myapps.microsoft.com" target="_blank" rel="noopener">Revoke AAD permission</a></div>
           <div><a href="https://account.live.com/consent/manage" target="_blank" rel="noopener">Revoke Consumer permission</a></div>
         </div>
       );
     };
   
     return (
       <div id="App">
         <h2>Microsoft Login Button application</h2>
         <AzureAuthenticationButton onAuthenticated={onAuthenticated} />
         {currentUser && (
           <div>
             <PrettyPrintJson data={currentUser} />
             <ShowPermissionRevokeLinks />
           </div>
         )}
       </div>
     );
   }
   
   export default App;
   

   Kullanıcı oturum açtıktan sonra, kimlik doğrulaması bu uygulamaya yeniden yönlendirirse, currentUser nesnesi görüntülenir.

6. React SPA uygulamasını oturum açma düğmesiyle çalıştırın

1. Visual Studio Code terminalinde uygulamayı başlatın:

   npm run start
   

   Uygulamanın tamamen başlatıldığını fark etmek için tümleşik VSCode 'u izleyin.

   Compiled successfully!
   
   You can now view js-e2e-client-azure-login-button in the browser.
   
     Local:            http://localhost:3000
     On Your Network:  http://x.x.x.x:3000
   
   Note that the development build is not optimized.
   To create a production build, use yarn build.
   

2. Web uygulamasını bir tarayıcıda açın http://localhost:3000 .

3. Web tarayıcısında oturum aç düğmesini seçin.

   

4. Bir kullanıcı hesabı seçin. Azure portal erişmek için kullandığınız hesapta aynı olması gerekmez, ancak Microsoft kimlik doğrulaması sağlayan bir hesap olmalıdır.

   

5. 1) Kullanıcı adı, 2) uygulama adı, 3) izinlerini kabul etmiş olarak gösteren açılan pencereyi gözden geçirin ve ardından Evet' i seçin.

   

6. Kullanıcı hesabı bilgilerini gözden geçirin.

   

7. Uygulamadan Oturumu Kapat düğmesini seçin. Uygulama Ayrıca, izinleri iptal etmek için Microsoft Kullanıcı uygulamalarına uygun bağlantılar sağlar.

7. uygulamaya özgü Kullanıcı bilgilerini depolayın

İsteğe bağlı olarak, kendi uygulamanızda gerekli olan Microsoft sağlayıcı kimliği ile kullanıcının verileri arasında ilişki kurmak için kullanıcı KIMLIĞINI kendi uygulama veritabanınıza kaydedebilirsiniz. Belirteç talebi , izlemek Isteyebileceğiniz iki kimliği içerir:

• Sub: özel ACTIVE DIRECTORY uygulama kimliğiniz için kullanıcıya özgü kimlik. Bu, özel uygulamanızın verilerini Microsoft Identity Provider Kullanıcı ile ilişkilendirmenize gerek duyduğunuzda kendi uygulama veritabanınızda depolamanız gereken KIMLIKTIR.
• OID: Bu, Microsoft Identity Provider 'daki tüm uygulamalarda evrensel Kullanıcı kimliğidir. Bu değeri, kimlik sağlayıcısındaki birçok uygulama genelinde Kullanıcı izlemeniz gerekiyorsa saklayın.

8. Kaynakları Temizleme

Bu öğreticiyi kullanarak işiniz bittiğinde Azure portal uygulama kayıt listesi' nden uygulamayı silin.

Uygulamayı korumak ve özel Kullanıcı hesabınız tarafından uygulamaya verilen izni iptal etmek istiyorsanız aşağıdaki bağlantılardan birini kullanın:

• AAD iznini iptal et
• Tüketici iznini iptal et

Sonraki adımlar

• MSAL.js ile çoklu oturum açma
• MSAL.js
• MSAL.js örnekleri
• Tüm MSAL örnekleri
• Kullanıcı profilini almak ve sessiz oturum açma sağlamak için msal kitaplığını kullanmaya devam edin
• e-posta ve takvim randevularını eklemek Microsoft 365 kullanıcı hesaplarına erişim Microsoft Graph ekleyin
• Azure statik Web uygulamaları
• Azure Web uygulamaları