Menyiapkan pendaftaran dan rincian masuk dengan akun Twitter menggunakan Azure Active Directory B2C

  • Artikel

Sebelum memulai, gunakan pemilih Pilih jenis kebijakan untuk memilih jenis kebijakan yang Anda siapkan. Azure Active Directory B2C menawarkan dua metode untuk menentukan cara pengguna berinteraksi dengan aplikasi Anda: melalui alur pengguna yang telah ditentukan sebelumnya atau melalui kebijakan kustom yang sepenuhnya dapat dikonfigurasi. Langkah yang diperlukan dalam artikel ini berbeda untuk setiap metode.

Catatan

Di Azure Active Directory B2C, kebijakan kustom didesain khusus untuk menangani skenario kompleks. Untuk skenario umum, sebaiknya gunakan alur pengguna bawaan. Jika Anda belum melakukannya, pelajari tentang paket starter kebijakan kustom di Mulai dengan kebijakan kustom di Azure Active Directory B2C.

Prasyarat

Membuat aplikasi

Untuk mengaktifkan login untuk pengguna dengan akun Twitter di Azure AD B2C, Anda perlu membuat aplikasi Twitter. Jika Anda belum memiliki akun Twitter, Anda dapat mendaftar di https://twitter.com/signup. Anda juga perlu Mengajukan permohonan akun pengembang. Untuk informasi selengkapnya, lihat Mengajukan permohonan akses.

  1. Masuk ke Portal Pengembang Twitter dengan kredensial akun Twitter Anda.
  2. Pilih tombol + Buat proyek.
  3. Di bawah tab Nama proyek, masukkan nama pilihan proyek Anda, lalu pilih tombol Berikutnya.
  4. Di bawah tab Kasus penggunaan, pilih kasus penggunaan pilihan Anda, lalu pilih Berikutnya.
  5. Di bawah tab Deskripsi proyek, masukkan deskripsi proyek Anda, lalu pilih tombol Berikutnya.
  6. Di bawah tab Nama aplikasi, masukkan nama untuk aplikasi Anda, seperti azureadb2c, dan pilih tombol Berikutnya.
  7. Di bawah tab Token Kunci&, salin nilai Kunci API dan Rahasia Kunci API. Anda akan menggunakannya untuk konfigurasi nanti.
  8. Pilih Pengaturan aplikasi untuk membuka pengaturan aplikasi.
  9. Di bagian bawah halaman, di bawah Pengaturan autentikasi pengguna, pilih Siapkan.
  10. Di bawah Jenis aplikasi, pilih jenis aplikasi yang sesuai seperti Aplikasi Web.
  11. Di bawah Info Aplikasi:
    1. Untuk URL Callback URI/Pengalihan, masukkan https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/your-policy-id/oauth1/authresp. Jika Anda menggunakan domain kustom, masukkan https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp. Gunakan semua huruf kecil saat memasukkan nama penyewa dan ID alur pengguna Anda meskipun ditentukan dengan huruf besar di Azure AD B2C. Menggantikan:
      • your-tenant-name dengan nama penyewa Anda.
      • your-domain-name dengan domain kustom Anda.
      • your-policy-id dengan pengidentifikasi aliran pengguna Anda. Contohnya, b2c_1a_signup_signin_twitter.
    2. Untuk URL Situs Web, masukkan https://your-tenant.b2clogin.com. Ganti your-tenant dengan nama penyewa Anda. Contohnya, https://contosob2c.b2clogin.com. Jika Anda menggunakan domain kustom, masukkan https://your-domain-name.
    3. (Opsional) Masukkan URL untuk Ketentuan layanan, misalnya http://www.contoso.com/tos. URL kebijakan adalah halaman yang Anda pertahankan untuk menyediakan syarat dan ketentuan untuk aplikasi Anda.
    4. (Opsional) Masukkan URL untuk Kebijakan privasi, misalnya http://www.contoso.com/privacy. URL kebijakan adalah halaman yang Anda pertahankan untuk memberikan syarat dan ketentuan untuk aplikasi Anda.
  12. Pilih Simpan.
  1. Masuk ke Portal Pengembang Twitter dengan kredensial akun Twitter Anda.
  2. Pilih tombol + Buat proyek.
  3. Di bawah tab Nama proyek, masukkan nama pilihan proyek Anda, lalu pilih tombol Berikutnya.
  4. Di bawah tab Kasus penggunaan, pilih kasus penggunaan pilihan Anda, lalu pilih Berikutnya.
  5. Di bawah tab Deskripsi proyek, masukkan deskripsi proyek Anda, lalu pilih tombol Berikutnya.
  6. Di bawah tab Nama aplikasi, masukkan nama untuk aplikasi Anda, seperti azureadb2c, dan pilih tombol Berikutnya.
  7. Di bawah tab Token & Kunci, salin nilai Kunci API dan Rahasia Kunci API untuk nanti. Anda menggunakan keduanya untuk mengonfigurasi Twitter sebagai penyedia identitas di penyewa Azure AD B2C Anda.
  8. Pilih Pengaturan aplikasi untuk membuka pengaturan aplikasi.
  9. Di bagian bawah halaman, di bawah Pengaturan autentikasi pengguna, pilih Siapkan.
  10. Di bawah Jenis aplikasi, pilih jenis aplikasi yang sesuai seperti Aplikasi Web.
  11. Di bawah Info Aplikasi:
    1. Untuk URL Callback URI/Pengalihan, masukkan https://your-tenant.b2clogin.com/your-tenant-name.onmicrosoft.com/your-user-flow-name/oauth1/authresp. Jika Anda menggunakan domain kustom, masukkan https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp. Gunakan semua huruf kecil saat memasukkan nama penyewa dan ID alur pengguna Anda meskipun ditentukan dengan huruf besar di Azure AD B2C. Menggantikan:
      • your-tenant-name dengan nama penyewa Anda.
      • your-domain-name dengan domain kustom Anda.
      • your-user-flow-name dengan pengidentifikasi aliran pengguna Anda. Contohnya, b2c_1_signup_signin_twitter.
    2. Untuk URL Situs Web, masukkan https://your-tenant.b2clogin.com. Ganti your-tenant dengan nama penyewa Anda. Contohnya, https://contosob2c.b2clogin.com. Jika Anda menggunakan domain kustom, masukkan https://your-domain-name.
    3. Masukkan URL untuk Ketentuan Layanan, misalnya http://www.contoso.com/tos. URL kebijakan adalah halaman yang Anda pertahankan untuk menyediakan syarat dan ketentuan untuk aplikasi Anda.
    4. Masukkan URL untuk kebijakan Privasi, misalnya http://www.contoso.com/privacy. URL kebijakan adalah halaman yang Anda pertahankan untuk memberikan syarat dan ketentuan untuk aplikasi Anda.
  12. Pilih Simpan.

Mengonfigurasi Twitter sebagai penyedia identitas

  1. Masuk ke portal Microsoft Azure sebagai administrator global penyewa Azure AD B2C Anda.
  2. Jika Anda memiliki akses ke beberapa penyewa, pilih ikon Pengaturan di menu atas untuk beralih ke penyewa Azure AD B2C Anda dari menu Direktori + langganan.
  3. Pilih Semua layanan di pojok kiri atas portal Microsoft Azure, lalu cari dan pilih AAD B2C.
  4. Pilih Penyedia identitas, lalu pilih Twitter.
  5. Masukkan nama . Misalnya, Twitter.
  6. Untuk ID Klien, masukkan Kunci API aplikasi Twitter yang Anda buat sebelumnya.
  7. Untuk rahasia Klien, masukkan rahasia kunci API yang Anda rekam.
  8. Pilih Simpan.

Menambahkan penyedia identitas Twitter ke alur pengguna

Pada titik ini, penyedia identitas Twitter telah disiapkan, tetapi belum tersedia di salah satu halaman masuk. Menambahkan penyedia identitas Twitter ke alur pengguna:

  1. Di penyewa AAD B2C Anda, pilih Alur pengguna.
  2. Pilih alur pengguna yang ingin Anda tambahkan penyedia identitas Twitter.
  3. Di bawah Penyedia identitas sosial, pilih Twitter.
  4. Pilih Simpan.

Menguji Alur Pengguna Anda

  1. Untuk menguji kebijakan Anda, pilih Jalankan alur pengguna.
  2. Untuk Aplikasi, pilih aplikasi web bernama testapp1 yang Anda daftarkan sebelumnya. URL Balasan harus menunjukkan https://jwt.ms.
  3. Klik tombol Jalankan alur pengguna.
  4. Dari halaman pendaftaran atau masuk, pilih Twitter untuk masuk dengan akun Twitter.

Buat kunci kebijakan

Anda perlu menyimpan kunci rahasia yang sebelumnya Anda rekam di penyewa Azure AD B2C Anda.

  1. Masuk ke portal Azure.
  2. Jika Anda memiliki akses ke beberapa penyewa, pilih ikon Pengaturan di menu atas untuk beralih ke penyewa Azure AD B2C Anda dari menu Direktori + langganan.
  3. Di portal Microsoft Azure, cari dan pilih AAD B2C.
  4. Di menu sebelah kiri, di bagian bawah Kebijakan, pilih Identity Experience Framework (IEF).
  5. Pilih Tombol Kebijakan, lalu pilih Tambahkan.
  6. Untuk Opsi, pilih Manual.
  7. Masukkan Nama untuk kunci kebijakan. Contohnya, TwitterSecret. Awalan B2C_1A_ ditambahkan secara otomatis ke nama kunci Anda.
  8. Untuk Rahasia, masukkan nilai rahasia kunci API yang sebelumnya Anda rekam.
  9. Untuk Penggunaan kunci, pilih Signature.
  10. Klik Buat.

Mengonfigurasi Twitter sebagai penyedia identitas

Untuk memungkinkan pengguna masuk menggunakan akun Twitter, Anda perlu menentukan akun sebagai penyedia klaim yang dapat dikomunikasikan dengan Azure AD B2C melalui titik akhir. Titik akhir menyediakan set klaim yang digunakan oleh Azure AD B2C untuk memverifikasi bahwa pengguna tertentu telah diautentikasi.

Anda dapat menentukan akun Twitter sebagai penyedia klaim dengan menambahkannya ke elemen ClaimsProviders dalam file ekstensi kebijakan Anda. Lihat paket pemula kebijakan kustom yang Anda unduh di Prasyarat artikel ini.

  1. Buka TrustFrameworkExtensions.xml.

  2. Temukan elemen ClaimsProviders. Jika tidak ada, tambahkan di bawah elemen akar.

  3. Tambahkan ClaimsProvider baru sebagai berikut:

    <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. Ganti nilai client_id dengan kunci API yang sebelumnya Anda catat.

  5. Simpan file.

Menambahkan perjalanan pengguna

Pada tahap ini, penyedia identitas telah disiapkan, tetapi belum tersedia di halaman masuk mana pun. Jika Anda tidak memiliki perjalanan pengguna kustom Anda sendiri, buat duplikat perjalanan pengguna template yang sudah ada, jika tidak lanjutkan ke langkah berikutnya.

  1. Buka file TrustFrameworkBase.xml dari paket pemula.
  2. Temukan dan salin seluruh konten elemen UserJourney yang menyertakan Id="SignUpOrSignIn".
  3. Buka TrustFrameworkExtensions.xml dan temukan elemen UserJourneys. Jika elemen tersebut tidak ada, tambahkan.
  4. Tempelkan seluruh konten elemen UserJourney yang Anda salin sebagai anak dari elemen UserJourneys.
  5. Ganti nama Id perjalanan pengguna. Contohnya, Id="CustomSignUpSignIn".

Tambahkan penyedia identitas ke perjalanan pengguna

Sekarang setelah Anda memiliki perjalanan pengguna, tambahkan penyedia identitas baru ke perjalanan pengguna. Anda terlebih dahulu menambahkan tombol masuk, lalu tautkan tombol tersebut ke tindakan. Tindakan ini adalah profil teknis yang Anda buat sebelumnya.

  1. Dalam perjalanan pengguna, temukan elemen langkah orkestrasi yang mencakup Type="CombinedSignInAndSignUp" atau Type="ClaimsProviderSelection". Ini biasanya langkah orkestrasi pertama. Elemen ClaimsProviderSelections berisi daftar penyedia identitas yang dapat digunakan pengguna untuk masuk. Urutan elemen mengontrol urutan tombol masuk yang disajikan kepada pengguna. Tambahkan elemen XML ClaimsProviderSelection. Tetapkan nilai TargetClaimsExchangeId ke nama yang bersahabat.

  2. Pada langkah orkestrasi berikutnya, tambahkan elemen ClaimsExchange. Set Id ke nilai pertukaran klaim target Id. Perbarui nilai TechnicalProfileReferenceId ke Id profil teknis yang Anda buat sebelumnya.

XML berikut menunjukkan dua langkah orkestrasi pertama dari perjalanan pengguna dengan penyedia identitas:

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

Mengonfigurasi kebijakan pihak yang diandalkan

Kebijakan pihak yang diandalkan, misalnya SignUpSignIn.xml, menentukan perjalanan yang akan dijalankan Azure AD B2C. Temukan elemen DefaultUserJourney dalam pihak yang diandalkan. Perbarui ReferenceId agar sesuai dengan ID perjalanan, tempat Anda menambahkan IdP.

Dalam contoh berikut, untuk perjalanan CustomSignUpSignIn, ReferenceId diatur ke CustomSignUpSignIn:

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

Mengunggah kebijakan kustom

  1. Masuk ke portal Azure.
  2. Pilih ikon Direktori + Langganan di toolbar portal, lalu pilih direktori yang berisi penyewa Azure AD B2C Anda.
  3. Di portal Microsoft Azure, cari dan pilih AAD B2C.
  4. Di bagian Kebijakan, pilih IEF.
  5. Pilih Unggah Kebijakan Kustom, lalu unggah dua file kebijakan yang Anda ubah, dalam urutan berikut: kebijakan ekstensi, misalnya TrustFrameworkExtensions.xml, lalu kebijakan pihak yang diandalkan, seperti SignUpSignIn.xml.

Menguji kebijakan kustom Anda

  1. Pilih kebijakan pihak yang mengandalkan Anda, misalnya B2C_1A_signup_signin.
  2. Untuk Aplikasi, pilih aplikasi web yang Anda daftarkan sebelumnya. URL Balasan harus menunjukkan https://jwt.ms.
  3. Pilih tombol Jalankan sekarang.
  4. Dari halaman pendaftaran atau masuk, pilih Twitter untuk masuk dengan akun Twitter.

Jika proses masuk berhasil, browser Anda dialihkan ke https://jwt.ms, yang menampilkan konten token yang dikembalikan oleh Azure AD B2C.

Tip

Jika Anda mendapati kesalahan unauthorized saat menguji idP ini, pastikan Anda menggunakan Kunci API Twitter dan Rahasia Kunci API yang benar, atau coba terapkan untuk akses yang ditingkatkan. Selain itu, sebaiknya lihat struktur proyek Twitter, jika Anda mendaftarkan aplikasi sebelum fitur tersebut tersedia.