หน้านี้ได้รับการแปลโดย Cloud Translation API

ตรวจสอบสิทธิ์โดยใช้ OpenID Connect ในเว็บแอป

หากคุณอัปเกรดเป็น Firebase Authentication ด้วย Identity Platform แล้ว คุณจะตรวจสอบสิทธิ์ผู้ใช้ด้วย Firebase ได้โดยใช้ผู้ให้บริการที่สอดคล้องกับ OpenID Connect (OIDC) ที่คุณเลือก ซึ่งทำให้สามารถใช้ผู้ให้บริการข้อมูลประจำตัวที่ Firebase ไม่รองรับโดยกำเนิดได้

ก่อนที่คุณจะเริ่ม

หากต้องการลงชื่อเข้าใช้ผู้ใช้โดยใช้ผู้ให้บริการ OIDC คุณต้องรวบรวมข้อมูลบางอย่างจากผู้ให้บริการก่อน:

รหัสลูกค้า : สตริงเฉพาะของผู้ให้บริการที่ระบุแอปของคุณ ผู้ให้บริการของคุณอาจกำหนดรหัสลูกค้าที่แตกต่างกันให้กับแต่ละแพลตฟอร์มที่คุณรองรับ นี่เป็นหนึ่งในค่าของการอ้างสิทธิ์ aud ในโทเค็น ID ที่ออกโดยผู้ให้บริการของคุณ
รหัสลับไคลเอ็นต์ : สตริงลับที่ผู้ให้บริการใช้เพื่อยืนยันความเป็นเจ้าของรหัสไคลเอ็นต์ สำหรับทุกรหัสไคลเอ็นต์ คุณจะต้องมีรหัสลับไคลเอ็นต์ที่ตรงกัน (ค่านี้จำเป็นเฉพาะในกรณีที่คุณใช้ โฟลว์โค้ดรับรองความ ถูกต้อง ซึ่งขอแนะนำเป็นอย่างยิ่ง)
ผู้ออก : สตริงที่ระบุผู้ให้บริการของคุณ ค่านี้ต้องเป็น URL ที่เมื่อต่อท้ายด้วย /.well-known/openid-configuration คือตำแหน่งของเอกสารการค้นพบ OIDC ของผู้ให้บริการ ตัวอย่างเช่น หากผู้ออกคือ https://auth.example.com เอกสารการค้นพบจะต้องมีอยู่ที่ https://auth.example.com/.well-known/openid-configuration

หลังจากที่คุณมีข้อมูลข้างต้นแล้ว ให้เปิดใช้งาน OpenID Connect เป็นผู้ให้บริการลงชื่อเข้าใช้สำหรับโปรเจ็กต์ Firebase ของคุณ:

เพิ่ม Firebase ในโครงการ JavaScript ของคุณ
หากคุณยังไม่ได้อัปเกรดเป็น Firebase Authentication ด้วย Identity Platform ให้ดำเนินการดังกล่าว การรับรองความถูกต้อง OpenID Connect มีเฉพาะในโปรเจ็กต์ที่อัปเกรดแล้วเท่านั้น
ในหน้า ผู้ให้บริการลงชื่อเข้าใช้ ของคอนโซล Firebase คลิก เพิ่มผู้ให้บริการใหม่ จากนั้นคลิก OpenID Connect
เลือกว่าคุณจะใช้ โฟลว์รหัสการให้สิทธิ์ หรือ โฟลว์การให้สิทธิ์โดยนัย
คุณควรใช้การไหลของโค้ดเสมอหากผู้ให้บริการของคุณรองรับ โฟลว์โดยนัยมีความปลอดภัยน้อยกว่า และไม่แนะนำให้ใช้งานอย่างยิ่ง
ตั้งชื่อให้กับผู้ให้บริการรายนี้ สังเกตรหัสผู้ให้บริการที่สร้างขึ้น: บางอย่างเช่น oidc.example-provider คุณจะต้องใช้รหัสนี้เมื่อเพิ่มรหัสลงชื่อเข้าใช้ลงในแอปของคุณ
ระบุรหัสไคลเอ็นต์และความลับไคลเอ็นต์ของคุณ และสตริงผู้ออกใบรับรองของผู้ให้บริการของคุณ ค่าเหล่านี้จะต้องตรงกับค่าที่ผู้ให้บริการกำหนดให้คุณทุกประการ
บันทึกการเปลี่ยนแปลงของคุณ

จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK

วิธีที่ง่ายที่สุดในการตรวจสอบสิทธิ์ผู้ใช้ด้วย Firebase โดยใช้ผู้ให้บริการ OIDC คือการจัดการขั้นตอนการลงชื่อเข้าใช้ทั้งหมดด้วย Firebase SDK

หากต้องการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนเหล่านี้

สร้างอินสแตนซ์ของ OAuthProvider โดยใช้รหัสผู้ให้บริการที่คุณได้รับในคอนโซล Firebase
API แบบโมดูลาร์ของเว็บ
```
import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');
```
API เนมสเปซของเว็บ
```
var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
```
ทางเลือก : ระบุพารามิเตอร์ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งพร้อมกับคำขอ OAuth
API แบบโมดูลาร์ของเว็บ
```
provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});
```
API เนมสเปซของเว็บ
```
provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});
```
ตรวจสอบกับผู้ให้บริการของคุณเกี่ยวกับพารามิเตอร์ที่รองรับ โปรดทราบว่าคุณไม่สามารถส่งพารามิเตอร์ที่ต้องใช้ Firebase ด้วย setCustomParameters พารามิเตอร์เหล่านี้คือ client_id , response_type , redirect_uri , state , scope และ response_mode
ทางเลือก : ระบุขอบเขต OAuth 2.0 เพิ่มเติมนอกเหนือจากโปรไฟล์พื้นฐานที่คุณต้องการขอจากผู้ให้บริการการตรวจสอบสิทธิ์
API แบบโมดูลาร์ของเว็บ
```
provider.addScope('mail.read');
provider.addScope('calendars.read');
```
API เนมสเปซของเว็บ
```
provider.addScope('mail.read');
provider.addScope('calendars.read');
```
ตรวจสอบกับผู้ให้บริการของคุณเกี่ยวกับขอบเขตที่รองรับ

ตรวจสอบสิทธิ์กับ Firebase โดยใช้วัตถุผู้ให้บริการ OAuth

คุณสามารถเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าลงชื่อเข้าใช้ของผู้ให้บริการหรือเปิดหน้าลงชื่อเข้าใช้ในหน้าต่างเบราว์เซอร์ป๊อปอัป

เปลี่ยนเส้นทางการไหล

เปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของผู้ให้บริการโดยการเรียก signInWithRedirect() :

API แบบโมดูลาร์ของเว็บ

import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

API เนมสเปซของเว็บ

firebase.auth().signInWithRedirect(provider);

หลังจากที่ผู้ใช้ลงชื่อเข้าใช้เสร็จแล้วและกลับมาที่แอปของคุณ คุณสามารถรับผลการลงชื่อเข้าใช้ได้โดยการเรียก getRedirectResult()

API แบบโมดูลาร์ของเว็บ

import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

API เนมสเปซของเว็บ

firebase.auth().getRedirectResult()
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

ป๊อปอัปไหล

API แบบโมดูลาร์ของเว็บ

import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    // IdP data available using getAdditionalUserInfo(result)

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

API เนมสเปซของเว็บ

firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

แม้ว่าตัวอย่างข้างต้นมุ่งเน้นไปที่ขั้นตอนการลงชื่อเข้าใช้ คุณสามารถใช้รูปแบบเดียวกันเพื่อเชื่อมโยงผู้ให้บริการ OIDC กับผู้ใช้ที่มีอยู่โดยใช้ linkWithRedirect() และ linkWithPopup() และรับรองความถูกต้องผู้ใช้อีกครั้งด้วย reauthenticateWithRedirect() และ reauthenticateWithPopup() ซึ่งสามารถใช้เพื่อดึงข้อมูลประจำตัวใหม่สำหรับการดำเนินการที่มีความละเอียดอ่อนซึ่งจำเป็นต้องเข้าสู่ระบบครั้งล่าสุด

จัดการขั้นตอนการลงชื่อเข้าใช้ด้วยตนเอง

หากคุณได้ใช้ขั้นตอนการลงชื่อเข้าใช้ OpenID Connect ในแอปของคุณแล้ว คุณสามารถใช้โทเค็น ID ได้โดยตรงเพื่อตรวจสอบสิทธิ์กับ Firebase:

API แบบโมดูลาร์ของเว็บ

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });

API เนมสเปซของเว็บ

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });