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

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

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

ก่อนจะเริ่ม

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

รหัสลูกค้า : สตริงเฉพาะสำหรับผู้ให้บริการที่ระบุแอปของคุณ ผู้ให้บริการของคุณอาจกำหนดรหัสลูกค้าที่แตกต่างกันให้กับแต่ละแพลตฟอร์มที่คุณสนับสนุน นี่เป็นหนึ่งในค่าของการเรียกร้อง aud ในโทเค็น ID ที่ออกโดยผู้ให้บริการของคุณ
ความลับไคลเอ็นต์ : สตริงลับที่ผู้ให้บริการใช้เพื่อยืนยันความเป็นเจ้าของ ID ไคลเอ็นต์ สำหรับรหัสลูกค้าทุกรหัส คุณจะต้องมีรหัสลับไคลเอ็นต์ที่ตรงกัน (ค่านี้จำเป็นเฉพาะเมื่อคุณใช้ auth code flow ซึ่งแนะนำเป็นอย่างยิ่ง)
ผู้ออก : สตริงที่ระบุผู้ให้บริการของคุณ ค่านี้ต้องเป็น 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
เลือกว่าคุณจะใช้โฟล ว์รหัสการ ให้สิทธิ์หรือโฟลว์การให้สิทธิ์โดยนัย
คุณควรใช้โฟลว์โค้ดเสมอหากผู้ให้บริการของคุณรองรับ การไหลโดยปริยายมีความปลอดภัยน้อยกว่าและไม่แนะนำให้ใช้
ตั้งชื่อให้กับผู้ให้บริการรายนี้ หมายเหตุ ID ผู้ให้บริการที่สร้างขึ้น: บางอย่างเช่น oidc.example-provider คุณจะต้องใช้รหัสนี้เมื่อเพิ่มรหัสลงชื่อเข้าใช้ในแอป
ระบุรหัสลูกค้าและข้อมูลลับของลูกค้า และสตริงผู้ออกของผู้ให้บริการของคุณ ค่าเหล่านี้ต้องตรงกับค่าที่ผู้ให้บริการของคุณกำหนดให้คุณทุกประการ
บันทึกการเปลี่ยนแปลงของคุณ

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

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

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

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

const provider = new OAuthProvider('oidc.example-provider');
```
Web version 8
```
var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
```
ไม่บังคับ : ระบุพารามิเตอร์ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งด้วยคำขอ OAuth
Web version 9
```
provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});
```
Web version 8
```
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 เพิ่มเติมนอกเหนือจากโปรไฟล์พื้นฐานที่คุณต้องการขอจากผู้ให้บริการตรวจสอบสิทธิ์
Web version 9
```
provider.addScope('mail.read');
provider.addScope('calendars.read');
```
Web version 8
```
provider.addScope('mail.read');
provider.addScope('calendars.read');
```
ตรวจสอบกับผู้ให้บริการของคุณสำหรับขอบเขตที่รองรับ

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

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

โฟลว์การเปลี่ยนเส้นทาง

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

Web version 9

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

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

Web version 8

firebase.auth().signInWithRedirect(provider);

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

Web version 9

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.
  });

Web version 8

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.
  });

ป๊อปอัปโฟลว์

Web version 9

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.
  });

Web version 8

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 ได้โดยตรง:

Web version 9

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.
    });

Web version 8

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.
    });