Trang này được dịch bởi Cloud Translation API.

Xác thực bằng SSO Connect trong các ứng dụng web

Nếu đã nâng cấp lên tính năng Xác thực Firebase bằng Nền tảng nhận dạng, bạn có thể xác thực người dùng bằng Firebase bằng cách sử dụng nhà cung cấp tương thích với OpenID Connect (OIDC) mà bạn chọn. Điều này giúp bạn có thể sử dụng trình cung cấp danh tính không được Firebase hỗ trợ sẵn.

Trước khi bắt đầu

Để đăng nhập cho người dùng bằng cách sử dụng nhà cung cấp OIDC, trước tiên, bạn phải thu thập một số thông tin từ nhà cung cấp đó:

Mã ứng dụng khách: Một chuỗi duy nhất của nhà cung cấp giúp nhận dạng ứng dụng của bạn. Nhà cung cấp có thể chỉ định cho bạn một mã ứng dụng khách khác nhau cho từng nền tảng mà bạn hỗ trợ. Đây là một trong các giá trị của thông báo xác nhận quyền sở hữu aud trong mã thông báo mã nhận dạng do nhà cung cấp của bạn cấp.
Mật khẩu ứng dụng khách: Chuỗi bí mật mà nhà cung cấp sử dụng để xác nhận quyền sở hữu một mã ứng dụng khách. Đối với mỗi mã ứng dụng khách, bạn cần có một mật khẩu ứng dụng khách trùng khớp. (Giá trị này chỉ bắt buộc nếu bạn đang sử dụng quy trình mã xác thực, bạn nên làm như vậy.)
Công ty phát hành: Một chuỗi xác định nhà cung cấp. Giá trị này phải là một URL mà khi được thêm với /.well-known/openid-configuration, sẽ là vị trí của tài liệu khám phá OIDC của nhà cung cấp. Ví dụ: nếu tổ chức phát hành là https://auth.example.com, thì tài liệu khám phá phải có tại https://auth.example.com/.well-known/openid-configuration.

Sau khi bạn có các thông tin trên, hãy bật OpenID Connect làm nhà cung cấp đăng nhập cho dự án Firebase của bạn:

Thêm Firebase vào dự án JavaScript của bạn.
Nếu bạn chưa nâng cấp lên tính năng Xác thực Firebase bằng Nền tảng nhận dạng, hãy thực hiện việc này. Phương thức xác thực OpenID Connect chỉ có trong các dự án đã nâng cấp.
Trên trang Nhà cung cấp dịch vụ đăng nhập trong bảng điều khiển của Firebase, hãy nhấp vào Thêm nhà cung cấp mới, sau đó nhấp vào OpenID Connect.
Chọn xem bạn sẽ sử dụng quy trình mã uỷ quyền hay quy trình cấp quyền ngầm ẩn.

Bạn nên luôn sử dụng luồng mã nếu nhà cung cấp hỗ trợ luồng mã này. Luồng ngầm ẩn sẽ kém an toàn hơn và bạn không nên sử dụng luồng này.
Đặt tên cho nhà cung cấp này. Lưu ý mã nhà cung cấp được tạo: chẳng hạn như oidc.example-provider. Bạn sẽ cần mã nhận dạng này khi thêm mã đăng nhập vào ứng dụng của mình.
Chỉ định mã ứng dụng khách, mật khẩu ứng dụng khách và chuỗi nhà phát hành của nhà cung cấp. Các giá trị này phải khớp chính xác với giá trị mà nhà cung cấp đã chỉ định cho bạn.
Lưu thay đổi.

Xử lý quy trình đăng nhập bằng Firebase SDK

Cách dễ nhất để xác thực người dùng bằng Firebase bằng cách sử dụng OIDC (OpenID Connect) là xử lý toàn bộ quy trình đăng nhập bằng Firebase SDK.

Để xử lý quy trình đăng nhập bằng SDK JavaScript của Firebase, hãy làm theo các bước sau:

Tạo một bản sao của OAuthProvider bằng cách sử dụng mã nhà cung cấp bạn có trong bảng điều khiển của Firebase.
API mô-đun web
```
import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');
```
API không gian tên trên web
```
var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
```
Không bắt buộc: Chỉ định các thông số OAuth tuỳ chỉnh khác mà bạn muốn gửi cùng với yêu cầu OAuth.
API mô-đun web
```
provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});
```
API không gian tên trên web
```
provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});
```
Hãy liên hệ với nhà cung cấp của bạn để biết các tham số mà nhà cung cấp đó hỗ trợ. Xin lưu ý rằng bạn không thể truyền các tham số bắt buộc của Firebase bằng setCustomParameters. Các tham số này là client_id, response_type, redirect_uri, state, scope và response_mode.
Không bắt buộc: Chỉ định các phạm vi OAuth 2.0 khác ngoài hồ sơ cơ bản mà bạn muốn yêu cầu từ nhà cung cấp dịch vụ xác thực.
API mô-đun web
```
provider.addScope('mail.read');
provider.addScope('calendars.read');
```
API không gian tên trên web
```
provider.addScope('mail.read');
provider.addScope('calendars.read');
```
Hãy liên hệ với nhà cung cấp của bạn để biết phạm vi mà nhà cung cấp đó hỗ trợ.

Xác thực bằng Firebase bằng đối tượng nhà cung cấp OAuth.

Bạn có thể chuyển hướng người dùng đến trang đăng nhập của nhà cung cấp hoặc mở trang đăng nhập trong cửa sổ trình duyệt bật lên.

Quy trình chuyển hướng

Chuyển hướng đến trang đăng nhập của nhà cung cấp bằng cách gọi signInWithRedirect():

API mô-đun web

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

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

API không gian tên trên web

firebase.auth().signInWithRedirect(provider);

Sau khi người dùng hoàn tất quy trình đăng nhập và quay lại ứng dụng, bạn có thể lấy kết quả đăng nhập bằng cách gọi getRedirectResult().

API mô-đun web

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 không gian tên trên web

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

Quy trình bật lên

API mô-đun web

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 không gian tên trên web

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

Mặc dù các ví dụ ở trên tập trung vào quy trình đăng nhập, nhưng bạn có thể sử dụng cùng một mẫu để liên kết nhà cung cấp OIDC với người dùng hiện có bằng linkWithRedirect() và linkWithPopup(), đồng thời xác thực lại người dùng bằng reauthenticateWithRedirect() và reauthenticateWithPopup() (có thể dùng để truy xuất thông tin xác thực mới cho các hoạt động nhạy cảm đòi hỏi phải đăng nhập gần đây).

Xử lý quy trình đăng nhập theo cách thủ công

Nếu đã triển khai quy trình đăng nhập OpenID Connect trong ứng dụng của mình, thì bạn có thể sử dụng trực tiếp mã thông báo mã nhận dạng để xác thực với Firebase:

API mô-đun web

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 không gian tên trên web

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