Regisztráció és bejelentkezés beállítása Twitter-fiókkal az Azure Active Directory B2C használatával

Mielőtt hozzákezdene, a Szabályzattípus kiválasztása választóval válassza ki a beállított szabályzat típusát. Az Azure Active Directory B2C két módszert kínál annak meghatározására, hogy a felhasználók hogyan használják az alkalmazásokat: előre definiált felhasználói folyamatokon vagy teljesen konfigurálható egyéni szabályzatokon keresztül. A cikkben szereplő lépések különbözőek az egyes metódusok esetében.

Megjegyzés:

Az Azure Active Directory B2C-ben az egyéni szabályzatok elsősorban összetett helyzetek kezelésére szolgálnak. A legtöbb forgatókönyv esetében javasoljuk, hogy beépített felhasználói folyamatokat használjon. Ha még nem tette meg, ismerkedjen meg az egyéni szabályzatok kezdőcsomagjával az Egyéni szabályzatok használatának első lépései az Active Directory B2C-ben.

Előfeltételek

• Hozzon létre egy felhasználói folyamatot , hogy a felhasználók regisztrálhassák és bejelentkezhessenek az alkalmazásba.
• Webalkalmazás regisztrálása.

• Az Egyéni szabályzatok használatának első lépései az Active Directory B2C-ben
• Webalkalmazás regisztrálása.

Alkalmazás létrehozása

Ha Twitter-fiókkal rendelkező felhasználók számára szeretné engedélyezni a bejelentkezést az Azure AD B2C-ben, létre kell hoznia egy Twitter-alkalmazást. Ha még nem rendelkezik Twitter-fiókkal, regisztrálhat a https://twitter.com/signupwebhelyen. Fejlesztői fiókra is alkalmaznia kell. További információ: Hozzáférés alkalmazása.

1. Jelentkezzen be a Twitter fejlesztői portálra a Twitter-fiók hitelesítő adataival.
2. Válassza a + Projekt létrehozása gombot.
3. A Projektnév lapon adja meg a projekt előnyben részesített nevét, majd kattintson a Tovább gombra.
4. A Használati eset lapon válassza ki az előnyben részesített használati esetet, majd válassza a Tovább gombot.
5. A Projekt leírása lapon adja meg a projekt leírását, majd kattintson a Tovább gombra.
6. Az Alkalmazásnév lapon adja meg az alkalmazás nevét (például azureadb2c), és válassza a Tovább gombot.
7. A Kulcsok & jogkivonatok lapon másolja ki az API Key és az API Key Secret értékét. Ezeket később fogja használni a konfigurációhoz.
8. Az alkalmazásbeállítások megnyitásához válassza az Alkalmazásbeállítások lehetőséget .
9. A lap alsó részén, a Felhasználói hitelesítési beállítások területen válassza a Beállítás lehetőséget.
10. Az Alkalmazás típusa területen válassza ki a megfelelő alkalmazástípust, például a Web Appot.
11. Az Alkalmazás adatai területen:
    1. A Visszahívási URI/Átirányítás URL-címéhez írja be a következőt https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/your-policy-id/oauth1/authresp: Ha egyéni tartományt használ, írja be a következőt:https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp Használja az összes kisbetűt a bérlő nevének és a felhasználói folyamatazonosítónak a megadásakor akkor is, ha nagybetűkkel vannak definiálva az Azure AD B2C-ben. Helyettesít:
       • your-tenant-name a bérlő nevével.
       • your-domain-name egyéni tartományával.
       • your-policy-id a felhasználói folyamat azonosítójával. For example, b2c_1a_signup_signin_twitter.
    2. A webhely URL-címéhez írja be a következőthttps://your-tenant.b2clogin.com: Cserélje le your-tenant a bérlő nevére. For example, https://contosob2c.b2clogin.com. Ha egyéni tartományt használ, írja be a következőt:https://your-domain-name
    3. (Nem kötelező) Adja meg például http://www.contoso.com/tosa szolgáltatási feltételek URL-címét. A szabályzat URL-címe egy olyan lap, amelyet fenntart, hogy kikötéseket és feltételeket adjon meg az alkalmazáshoz.
    4. (Nem kötelező) Adja meg például http://www.contoso.com/privacyaz adatvédelmi szabályzat URL-címét. A szabályzat URL-címe egy olyan lap, amelyet az alkalmazás adatvédelmi adatainak megadásához tart fenn.
12. Válassza a Mentés parancsot.

1. Jelentkezzen be a Twitter fejlesztői portálra a Twitter-fiók hitelesítő adataival.
2. Válassza a + Projekt létrehozása gombot.
3. A Projektnév lapon adja meg a projekt előnyben részesített nevét, majd kattintson a Tovább gombra.
4. A Használati eset lapon válassza ki az előnyben részesített használati esetet, majd válassza a Tovább gombot.
5. A Projekt leírása lapon adja meg a projekt leírását, majd kattintson a Tovább gombra.
6. Az Alkalmazásnév lapon adja meg az alkalmazás nevét (például azureadb2c), és válassza a Tovább gombot.
7. A Kulcsok & jogkivonatok lapon másolja ki az API Key és az API Key Secret értékét későbbi használatra. Mindkettővel konfigurálhatja a Twittert identitásszolgáltatóként az Azure AD B2C-bérlőben.
8. Az alkalmazásbeállítások megnyitásához válassza az Alkalmazásbeállítások lehetőséget .
9. A lap alsó részén, a Felhasználói hitelesítési beállítások területen válassza a Beállítás lehetőséget.
10. Az Alkalmazás típusa területen válassza ki a megfelelő alkalmazástípust, például a Web Appot.
11. Az Alkalmazás adatai területen:
    1. A Visszahívási URI/Átirányítás URL-címéhez írja be a következőt https://your-tenant.b2clogin.com/your-tenant-name.onmicrosoft.com/your-user-flow-name/oauth1/authresp: Ha egyéni tartományt használ, írja be a következőt:https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp Használja az összes kisbetűt a bérlő nevének és a felhasználói folyamatazonosítónak a megadásakor akkor is, ha nagybetűkkel vannak definiálva az Azure AD B2C-ben. Helyettesít:
       • your-tenant-name a bérlő nevével.
       • your-domain-name egyéni tartományával.
       • your-user-flow-name a felhasználói folyamat azonosítójával. For example, b2c_1_signup_signin_twitter.
    2. A webhely URL-címéhez írja be a következőthttps://your-tenant.b2clogin.com: Cserélje le your-tenant a bérlő nevére. For example, https://contosob2c.b2clogin.com. Ha egyéni tartományt használ, írja be a következőt:https://your-domain-name
    3. Adja meg például http://www.contoso.com/tosa szolgáltatási feltételek URL-címét. A szabályzat URL-címe egy olyan lap, amelyet fenntart, hogy kikötéseket és feltételeket adjon meg az alkalmazáshoz.
    4. Adja meg például http://www.contoso.com/privacyaz adatvédelmi szabályzat URL-címét. A szabályzat URL-címe egy olyan lap, amelyet az alkalmazás adatvédelmi adatainak megadásához tart fenn.
12. Válassza a Mentés parancsot.

A Twitter konfigurálása identitásszolgáltatóként

1. Jelentkezzen be az Azure Portalra az Azure AD B2C-bérlő globális rendszergazdájaként.
2. Ha több bérlőhöz is hozzáfér, a felső menüben válassza a Gépház ikont az Azure AD B2C-bérlőre való váltáshoz a Címtárak + előfizetések menüből.
3. Válassza az Azure Portal bal felső sarkában található Minden szolgáltatás lehetőséget, majd keresse meg és válassza ki az Azure AD B2C-t.
4. Válassza az Identitásszolgáltatók, majd a Twitter lehetőséget.
5. Adjon meg egy nevet. Például Twitter.
6. Az ügyfélazonosítóhoz adja meg a korábban létrehozott Twitter-alkalmazás API-kulcsát.
7. Az ügyfél titkos kódjának megadásához adja meg a rögzített API-kulcstitkot.
8. Válassza a Mentés parancsot.

Twitter-identitásszolgáltató hozzáadása felhasználói folyamathoz

Ezen a ponton a Twitter identitásszolgáltatója be van állítva, de még nem érhető el egyik bejelentkezési oldalon sem. A Twitter-identitásszolgáltató hozzáadása egy felhasználói folyamathoz:

1. Az Azure AD B2C-bérlőben válassza a Felhasználói folyamatok lehetőséget.
2. Válassza ki azt a felhasználói folyamatot, amelyet hozzá szeretne adni a Twitter-identitásszolgáltatóhoz.
3. A közösségi identitásszolgáltatók alatt válassza a Twitter lehetőséget.
4. Válassza a Mentés parancsot.

A felhasználói folyamat tesztelése

1. A szabályzat teszteléséhez válassza a Felhasználói folyamat futtatása lehetőséget.
2. Alkalmazás esetén válassza ki a korábban regisztrált testapp1 nevű webalkalmazást. A Válasz URL-címnek meg kell jelennie https://jwt.ms.
3. Válassza a Felhasználói folyamat futtatása gombot.
4. A regisztrációs vagy bejelentkezési oldalon válassza a Twitter lehetőséget a Twitter-fiókkal való bejelentkezéshez.

Szabályzatkulcs létrehozása

A Twitter-alkalmazáshoz korábban rögzített titkos kulcsot az Azure AD B2C-bérlőben kell tárolnia.

1. Jelentkezzen be az Azure Portalra.
2. Ha több bérlőhöz is hozzáfér, a felső menüben válassza a Gépház ikont az Azure AD B2C-bérlőre való váltáshoz a Címtárak + előfizetések menüből.
3. Az Azure Portalon keresse meg és válassza ki az Azure AD B2C-t.
4. A bal oldali menü Szabályzatok területén válassza az Identity Experience Framework lehetőséget.
5. Válassza a Házirendkulcsok lehetőséget, majd válassza a Hozzáadás lehetőséget.
6. A Beállítások beállításnál válassza a Manuallehetőséget.
7. Adja meg a szabályzatkulcs nevét. For example, TwitterSecret. A rendszer automatikusan hozzáadja az előtagot B2C_1A_ a kulcs nevéhez.
8. A Titkos kód mezőben adja meg a korábban rögzített API-kulcs titkos értékét.
9. Kulcshasználat esetén válassza a Signaturelehetőséget.
10. Click Create.

A Twitter konfigurálása identitásszolgáltatóként

Ahhoz, hogy a felhasználók Twitter-fiókkal jelentkezzenek be, meg kell határoznia a fiókot jogcímszolgáltatóként, amellyel az Azure AD B2C egy végponton keresztül tud kommunikálni. A végpont olyan jogcímeket biztosít, amelyeket az Azure AD B2C használ annak ellenőrzésére, hogy egy adott felhasználó hitelesített-e.

A Twitter-fiókot jogcímszolgáltatóként úgy határozhatja meg, hogy hozzáadja azt a szabályzat bővítményfájljában lévő ClaimsProviders elemhez. Tekintse meg a jelen cikk előfeltételei között letöltött egyéni szabályzat-kezdőcsomagot.

1. Nyissa meg az TrustFrameworkExtensions.xml fájlt.

2. Keresse meg a ClaimsProviders elemet. Ha nem létezik, adja hozzá a gyökérelemhez.

3. Adjon hozzá egy új ClaimsProvidert az alábbiak szerint:

   <ClaimsProvider>
     <Domain>twitter.com</Domain>
     <DisplayName>Twitter</DisplayName>
     <TechnicalProfiles>
       <TechnicalProfile Id="Twitter-OAuth1">
         <DisplayName>Twitter</DisplayName>
         <Protocol Name="OAuth1" />
         <Metadata>
           <Item Key="ProviderName">Twitter</Item>
           <Item Key="authorization_endpoint">https://api.twitter.com/oauth/authenticate</Item>
           <Item Key="access_token_endpoint">https://api.twitter.com/oauth/access_token</Item>
           <Item Key="request_token_endpoint">https://api.twitter.com/oauth/request_token</Item>
           <Item Key="ClaimsEndpoint">https://api.twitter.com/1.1/account/verify_credentials.json?include_email=true</Item>
           <Item Key="ClaimsResponseFormat">json</Item>
           <Item Key="client_id">Your Twitter application API key</Item>
         </Metadata>
         <CryptographicKeys>
           <Key Id="client_secret" StorageReferenceId="B2C_1A_TwitterSecret" />
         </CryptographicKeys>
         <OutputClaims>
           <OutputClaim ClaimTypeReferenceId="issuerUserId" PartnerClaimType="user_id" />
           <OutputClaim ClaimTypeReferenceId="displayName" PartnerClaimType="screen_name" />
           <OutputClaim ClaimTypeReferenceId="email" />
           <OutputClaim ClaimTypeReferenceId="identityProvider" DefaultValue="twitter.com" />
           <OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" />
         </OutputClaims>
         <OutputClaimsTransformations>
           <OutputClaimsTransformation ReferenceId="CreateRandomUPNUserName" />
           <OutputClaimsTransformation ReferenceId="CreateUserPrincipalName" />
           <OutputClaimsTransformation ReferenceId="CreateAlternativeSecurityId" />
           <OutputClaimsTransformation ReferenceId="CreateSubjectClaimFromAlternativeSecurityId" />
         </OutputClaimsTransformations>
         <UseTechnicalProfileForSessionManagement ReferenceId="SM-SocialLogin" />
       </TechnicalProfile>
     </TechnicalProfiles>
   </ClaimsProvider>
   

4. Cserélje le a client_id értékét a korábban rögzített API-kulcsra.

5. Mentse a fájlt.

Felhasználói folyamat hozzáadása

Ezen a ponton az identitásszolgáltató be van állítva, de még nem érhető el egyik bejelentkezési oldalon sem. Ha nem rendelkezik saját egyéni felhasználói folyamatokkal, hozzon létre egy meglévő sablonfelhasználói folyamat másolatát, ellenkező esetben folytassa a következő lépéssel.

1. Nyissa meg az TrustFrameworkBase.xml fájlt a kezdőcsomagból.
2. Keresse meg és másolja ki a UserJourney elem teljes tartalmát, amely tartalmazza Id="SignUpOrSignIn"a elemet.
3. Nyissa meg az TrustFrameworkExtensions.xml fájlt , és keresse meg a UserJourneys elemet. Ha az elem nem létezik, adjon hozzá egyet.
4. Illessze be a UserJourney elem gyermekként másolt UserJourney elem teljes tartalmát.
5. Nevezze át a felhasználói folyamat azonosítóját. For example, Id="CustomSignUpSignIn".

Identitásszolgáltató hozzáadása egy felhasználói folyamathoz

Most, hogy már rendelkezik felhasználói folyamatokkal, adja hozzá az új identitásszolgáltatót a felhasználói folyamathoz. Először hozzáad egy bejelentkezési gombot, majd csatolja a gombot egy művelethez. A művelet a korábban létrehozott technikai profil.

1. Keresse meg a vezénylési lépés azon elemét, amely tartalmazza Type="CombinedSignInAndSignUp"vagy Type="ClaimsProviderSelection" a felhasználói folyamat során. Általában ez az első vezénylési lépés. A ClaimsProviderSelections elem azon identitásszolgáltatók listáját tartalmazza, amelyekkel a felhasználó bejelentkezhet. Az elemek sorrendje szabályozza a felhasználónak megjelenített bejelentkezési gombok sorrendjét. Adjon hozzá egy ClaimsProviderSelection XML-elemet. Állítsa be a TargetClaimsExchangeId értékét egy rövid névre.

2. A következő vezénylési lépésben adjon hozzá egy ClaimsExchange elemet. Állítsa az azonosítót a cél jogcímcsere-azonosító értékére. Frissítse a TechnicalProfileReferenceId értékét a korábban létrehozott műszaki profil azonosítójára.

Az alábbi XML a felhasználói folyamat első két vezénylési lépését mutatja be az identitásszolgáltatóval:

<OrchestrationStep Order="1" Type="CombinedSignInAndSignUp" ContentDefinitionReferenceId="api.signuporsignin">
  <ClaimsProviderSelections>
    ...
    <ClaimsProviderSelection TargetClaimsExchangeId="TwitterExchange" />
  </ClaimsProviderSelections>
  ...
</OrchestrationStep>

<OrchestrationStep Order="2" Type="ClaimsExchange">
  ...
  <ClaimsExchanges>
    <ClaimsExchange Id="TwitterExchange" TechnicalProfileReferenceId="Twitter-OAuth1" />
  </ClaimsExchanges>
</OrchestrationStep>

A függő entitás házirendjének konfigurálása

A függő entitás házirendje( például SignUpSignIn.xml) meghatározza az Azure AD B2C által végrehajtandó felhasználói folyamatot. Keresse meg a DefaultUserJourney elemet a függő entitáson belül. Frissítse a referenciaazonosítót a felhasználói útazonosítónak megfelelően, amelyben hozzáadta az identitásszolgáltatót.

A következő példában a CustomSignUpSignIn felhasználói folyamat referenciaazonosítója a következőre CustomSignUpSignInvan állítva:

<RelyingParty>
  <DefaultUserJourney ReferenceId="CustomSignUpSignIn" />
  ...
</RelyingParty>

Az egyéni szabályzat feltöltése

1. Jelentkezzen be az Azure Portalra.
2. Válassza a Címtár + Előfizetés ikont a portál eszköztárán, majd válassza ki az Azure AD B2C-bérlőt tartalmazó könyvtárat.
3. Az Azure Portalon keresse meg és válassza ki az Azure AD B2C-t.
4. A Szabályzatok területen válassza az Identity Experience Framework lehetőséget.
5. Válassza az Egyéni házirend feltöltése lehetőséget, majd töltse fel a módosított két házirendfájlt a következő sorrendben: a bővítményházirend, például TrustFrameworkExtensions.xmla függő entitás házirendje, például SignUpSignIn.xml.

Egyéni szabályzat tesztelése

1. Válassza ki például B2C_1A_signup_signina függő entitás szabályzatát.
2. Alkalmazás esetén válasszon ki egy korábban regisztrált webalkalmazást. A Válasz URL-címnek meg kell jelennie https://jwt.ms.
3. Válassza a Futtatás most gombot.
4. A regisztrációs vagy bejelentkezési oldalon válassza a Twitter lehetőséget a Twitter-fiókkal való bejelentkezéshez.

Ha a bejelentkezési folyamat sikeres, a rendszer átirányítja a böngészőt, amely megjeleníti az Azure AD B2C által visszaadott https://jwt.msjogkivonat tartalmát.

Tipp.

Ha hibát tapasztal unauthorized az identitásszolgáltató tesztelése során, győződjön meg arról, hogy a megfelelő Twitter API-kulcsot és API-kulcstitkot használja, vagy próbáljon meg emelt szintű hozzáférést igényelni. Azt is javasoljuk, hogy tekintse meg a Twitter projektstruktúráját, ha regisztrálta az alkalmazást, mielőtt a funkció elérhető lett volna.