Menyiapkan pendaftaran dan masuk dengan akun QQ menggunakan Azure Active Directory B2C

2025-05-04

Penting

Berlaku mulai 1 Mei 2025, Azure AD B2C tidak akan lagi tersedia untuk dibeli untuk pelanggan baru. Pelajari lebih lanjut di FAQ kami.

Sebelum memulai, gunakan pemilih Pilih jenis kebijakan di bagian atas halaman ini 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.

Nota

Fitur ini dalam tahap pratinjau publik.

Prasyarat

Buat alur pengguna agar pengguna dapat mendaftar dan masuk ke aplikasi Anda.
Daftarkan aplikasi web.

Selesaikan langkah-langkah dalam Mulai menggunakan kebijakan kustom di Active Directory B2C. Tutorial ini memandu Anda cara memperbarui file kebijakan kustom untuk menggunakan konfigurasi penyewa Azure AD B2C Anda.
Daftarkan aplikasi web.

Membuat aplikasi QQ

Untuk mengaktifkan masuk bagi pengguna dengan akun QQ di Azure Active Directory B2C (Azure AD B2C), Anda perlu membuat aplikasi di portal pengembang QQ. Jika Anda belum memiliki akun QQ, Anda dapat mendaftar di https://ssl.zc.qq.com.

Daftar untuk program pengembang QQ

Masuk ke portal pengembang QQ dengan kredensial akun QQ Anda.
Setelah masuk, buka https://open.qq.com/reg untuk mendaftarkan diri Anda sebagai developer.
Pilih 个人 (pengembang individu).
Masukkan informasi yang diperlukan dan pilih 下一步 (langkah berikutnya).
Selesaikan proses verifikasi email. Anda harus menunggu beberapa hari untuk disetujui setelah mendaftar sebagai pengembang.

Daftarkan aplikasi QQ

Pergi ke https://connect.qq.com/index.html.
Pilih 应用管理 (manajemen aplikasi).
Pilih 创建应用 (buat aplikasi) dan masukkan informasi yang diperlukan.
Untuk 授权回调域 (URL callback), masukkan https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/authresp. Jika Anda menggunakan domain kustom, masukkan https://your-domain-name/your-tenant-name.onmicrosoft.com/oauth2/authresp. Ganti your-tenant-name dengan nama penyewa Anda, dan your-domain-name dengan domain kustom Anda.
Pilih 创建应用 (buat aplikasi).
Pada halaman konfirmasi, pilih 应用管理 (manajemen aplikasi) untuk kembali ke halaman manajemen aplikasi.
Pilih 查看 (tampilan) di sebelah aplikasi yang Anda buat.
Pilih 修改 (edit).
Salin ID APP dan APP KEY. Anda memerlukan kedua nilai ini untuk menambahkan penyedia identitas ke penyewa Anda.

Mengonfigurasi QQ sebagai penyedia identitas

Masuk ke portal Azure.
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 .
Di portal Microsoft Azure, cari dan pilih AAD B2C.
Pilih Penyedia identitas, lalu pilih QQ (Pratinjau).
Masukkan nama . Misalnya, QQ.
Untuk ID Klien, masukkan ID APLIKASI aplikasi QQ yang Anda buat sebelumnya.
Untuk Rahasia klien, masukkan KUNCI APLIKASI yang Anda rekam.
Pilih Simpan.

Menambahkan penyedia identitas QQ ke alur pengguna

Pada tenant Azure AD B2C Anda, pilih Alur pengguna.
Klik alur pengguna tempat Anda ingin menambahkan penyedia identitas QQ.
Di bawah Penyedia identitas sosial, pilih QQ.
Pilih Simpan.
Untuk menguji kebijakan Anda, pilih Jalankan alur pengguna.
Untuk Aplikasi, pilih aplikasi web bernama testapp1 yang sebelumnya Anda daftarkan. URL Balasan harus menampilkan https://jwt.ms.
Klik tombol Jalankan alur pengguna.
Dari halaman pendaftaran atau masuk, pilih QQ untuk masuk dengan akun QQ.

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

Membuat kunci kebijakan

Anda perlu menyimpan kunci rahasia klien yang telah Anda catat sebelumnya di penyewa Azure AD B2C Anda.

Masuk ke portal Azure.
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 .
Pilih Semua layanan di sudut kiri atas portal Microsoft Azure, lalu cari dan pilih Azure AD B2C.
Pada halaman Gambaran Umum, pilih Kerangka Kerja Pengalaman Identitas.
Pilih Kunci Kebijakan lalu pilih Tambahkan.
Untuk Opsi, pilih Manual.
Masukkan Nama untuk kunci kebijakan. Contohnya, QQSecret. Awalan B2C_1A_ ditambahkan secara otomatis ke nama kunci Anda.
Di Rahasia, masukkan rahasia klien yang sebelumnya Anda rekam.
Untuk Penggunaan kunci, pilih Signature.
Klik Buat.

Mengonfigurasi QQ sebagai penyedia identitas

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

Anda dapat menentukan akun QQ sebagai penyedia klaim dengan menambahkannya ke elemen ClaimsProviders dalam file ekstensi polis Anda.

Buka TrustFrameworkExtensions.xml.
Temukan elemen ClaimsProviders . Jika tidak ada, tambahkan di bawah elemen utama.

Tambahkan ClaimsProvider baru sebagai berikut:

<ClaimsProvider>
  <Domain>qq.com</Domain>
  <DisplayName>QQ (Preview)</DisplayName>
  <TechnicalProfiles>
    <TechnicalProfile Id="QQ-OAuth2">
      <DisplayName>QQ</DisplayName>
      <Protocol Name="OAuth2" />
      <Metadata>
        <Item Key="ProviderName">qq</Item>
        <Item Key="authorization_endpoint">https://graph.qq.com/oauth2.0/authorize</Item>
        <Item Key="AccessTokenEndpoint">https://graph.qq.com/oauth2.0/token</Item>
        <Item Key="ClaimsEndpoint">https://graph.qq.com/oauth2.0/me</Item>
        <Item Key="scope">get_user_info</Item>
        <Item Key="HttpBinding">GET</Item>
        <Item Key="ClaimsResponseFormat">JsonP</Item>
        <Item Key="ResponseErrorCodeParamName">error</Item>
        <Item Key="external_user_identity_claim_id">openid</Item>
        <Item Key="client_id">Your QQ application ID</Item>
      </Metadata>
      <CryptographicKeys>
        <Key Id="client_secret" StorageReferenceId="B2C_1A_QQSecret" />
      </CryptographicKeys>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="UserId" PartnerClaimType="openid" />
        <OutputClaim ClaimTypeReferenceId="identityProvider" DefaultValue="qq.com" AlwaysUseDefaultValue="true" />
        <OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" AlwaysUseDefaultValue="true" />
      </OutputClaims>
      <OutputClaimsTransformations>
        <OutputClaimsTransformation ReferenceId="CreateRandomUPNUserName" />
        <OutputClaimsTransformation ReferenceId="CreateUserPrincipalName" />
        <OutputClaimsTransformation ReferenceId="CreateAlternativeSecurityId" />
        <OutputClaimsTransformation ReferenceId="CreateSubjectClaimFromAlternativeSecurityId" />
      </OutputClaimsTransformations>
      <UseTechnicalProfileForSessionManagement ReferenceId="SM-SocialLogin" />
    </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

Atur client_id ke ID aplikasi dari pendaftaran aplikasi.
Simpan file tersebut.

Menambahkan perjalanan pengguna

Pada titik ini, penyedia identitas telah disiapkan, tetapi belum tersedia di salah satu halaman login. Jika Anda tidak memiliki perjalanan pengguna kustom Anda sendiri, buat duplikat perjalanan pengguna templat yang ada, jika tidak, lanjutkan ke langkah berikutnya.

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

Menambahkan Penyedia Identitas ke alur pengguna

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

Temukan elemen tahap orkestrasi yang menyertakan Type="CombinedSignInAndSignUp", atau Type="ClaimsProviderSelection" dalam perjalanan pengguna. Biasanya ini adalah 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 . Atur nilai TargetClaimsExchangeId ke nama yang mudah diingat.
Pada langkah orkestrasi berikutnya, tambahkan elemen ClaimsExchange . Atur Id ke nilai id pertukaran klaim target. Perbarui nilai TechnicalProfileReferenceId ke Id profil teknis yang Anda buat sebelumnya.

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

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

<OrchestrationStep Order="2" Type="ClaimsExchange">
  ...
  <ClaimsExchanges>
    <ClaimsExchange Id="QQExchange" TechnicalProfileReferenceId="QQ-OAuth2" />
  </ClaimsExchanges>
</OrchestrationStep>

Mengonfigurasi kebijakan pihak terandal

Kebijakan pihak yang mengandalkan, misalnya SignUpSignIn.xml, menentukan perjalanan pengguna yang akan dijalankan Azure AD B2C. Temukan elemen DefaultUserJourney dalam pihak yang memercayai. Perbarui ReferenceId agar sesuai dengan ID perjalanan pengguna, di mana Anda menambahkan penyedia identitas.

Dalam contoh berikut, untuk CustomSignUpSignIn alur pengguna, ReferenceId ditentukan menjadi CustomSignUpSignIn:

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

Mengunggah kebijakan kustom

Masuk ke portal Azure.
Pilih ikon Direktori + Langganan di toolbar portal, lalu pilih direktori yang berisi penyewa Azure AD B2C Anda.
Di portal Microsoft Azure, cari dan pilih AAD B2C.
Di bawah Kebijakan, pilih Kerangka Kerja Pengalaman Identitas.
Pilih Unggah Kebijakan Kustom, lalu unggah dua file kebijakan yang Anda ubah, dalam urutan berikut: kebijakan ekstensi, misalnya TrustFrameworkExtensions.xml, lalu kebijakan pihak yang mengandalkan, seperti SignUpSignIn.xml.

Menguji kebijakan khusus Anda

Pilih kebijakan pihak kepercayaan Anda, misalnya B2C_1A_signup_signin.
Untuk Aplikasi , pilih aplikasi web yang sebelumnya Anda daftarkan . URL Balasan harus menampilkan https://jwt.ms.
Pilih tombol Jalankan sekarang.
Dari halaman pendaftaran atau masuk, pilih QQ untuk masuk dengan akun QQ.

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

Bagikan melalui

Menyiapkan pendaftaran dan masuk dengan akun QQ menggunakan Azure Active Directory B2C

Prasyarat

Membuat aplikasi QQ

Daftar untuk program pengembang QQ

Daftarkan aplikasi QQ

Mengonfigurasi QQ sebagai penyedia identitas

Menambahkan penyedia identitas QQ ke alur pengguna

Membuat kunci kebijakan

Mengonfigurasi QQ sebagai penyedia identitas

Menambahkan perjalanan pengguna

Menambahkan Penyedia Identitas ke alur pengguna

Mengonfigurasi kebijakan pihak terandal

Mengunggah kebijakan kustom

Menguji kebijakan khusus Anda

Saran dan Komentar

Sumber Daya Tambahan: