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

Nếu bạn đã nâng cấp lên 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 của mình với Firebase bằng cách sử dụng nhà cung cấp tuân thủ OpenID Connect (OIDC) mà bạn chọn. Điều này giúp bạn có thể sử dụng các nhà cung cấp danh tính không được Firebase hỗ trợ.

Trước khi bắt đầu

Để đăng nhập người dùng bằ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:

  • ID khách hàng : Một chuỗi duy nhất cho nhà cung cấp xác định ứng dụng của bạn. Nhà cung cấp của bạn có thể chỉ định cho bạn một ID khách hàng khác cho từng nền tảng mà bạn hỗ trợ. Đây là một trong những giá trị của xác nhận quyền aud hữu trong mã thông báo ID do nhà cung cấp của bạn phát hành.

  • Bí mật ứ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 ID khách hàng. Đối với mọi ID khách hàng, bạn sẽ cần một bí mật khách hàng phù hợ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, điều này được khuyến nghị thực sự.)

  • Nhà cung cấp : Một chuỗi xác định nhà cung cấp của bạn. Giá trị này phải là một URL, khi được thêm vào với /.well-known/openid-configuration , 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ó sẵn tại https://auth.example.com/.well-known/openid-configuration .

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

  1. Thêm Firebase vào dự án JavaScript của bạn .

  2. Nếu bạn chưa nâng cấp lên Xác thực Firebase bằng Nền tảng nhận dạng, hãy làm như vậy. Xác thực OpenID Connect chỉ khả dụng trong các dự án được nâng cấp.

  3. Trên trang Nhà cung cấp đăng nhập của bảng điều khiển Firebase, nhấp vào Thêm nhà cung cấp mới , sau đó nhấp vào Kết nối OpenID .

  4. Chọn xem bạn sẽ sử dụng quy trình mã ủy quyền hay quy trình cấp phép ngầm .

    Bạn nên sử dụng luôn dòng mã nếu nhà cung cấp của bạn hỗ trợ nó . Luồng ngầm kém an toàn hơn và việc sử dụng nó không được khuyến khích.

  5. Đặt tên cho nhà cung cấp này. Lưu ý ID nhà cung cấp được tạo: một cái gì đó giống như oidc.example-provider . Bạn sẽ cần ID này khi thêm mã đăng nhập vào ứng dụng của mình.

  6. Chỉ định ID khách hàng và bí mật khách hàng của bạn và chuỗi nhà cung cấp dịch vụ của nhà cung cấp của bạn. Các giá trị này phải khớp chính xác với các giá trị mà nhà cung cấp của bạn đã chỉ định cho bạn.

  7. Lưu các thay đổi của bạn.

Xử lý quy trình đăng nhập với SDK Firebase

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

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

  1. Tạo một phiên bản của OAuthProvider bằng cách sử dụng ID nhà cung cấp mà bạn có trong bảng điều khiển 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');

  2. Tùy chọn : Chỉ định các thông số OAuth tùy chỉnh bổ sung mà bạn muốn gửi cùng với yêu cầu 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'
});

    Kiểm tra với nhà cung cấp của bạn để biết các thông số mà nó hỗ trợ. Lưu ý rằng bạn không thể chuyển các tham số bắt buộc của Firebase với setCustomParameters . Các tham số này là client_id , response_type , redirect_uri , state , scope và response_mode .

  3. Tùy chọn : Chỉ định phạm vi OAuth 2.0 bổ sung ngoài hồ sơ cơ bản mà bạn muốn yêu cầu từ nhà cung cấp xác thực.

    Web version 9

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Web version 8

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Kiểm tra với nhà cung cấp của bạn để biết các phạm vi mà nó hỗ trợ.

  4. Xác thực với 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.

    Chuyển hướng luồng

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

    Web version 9

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

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

    Web version 8

    firebase.auth().signInWithRedirect(provider);

    Sau khi người dùng hoàn tất đăng nhập và quay lại ứng dụng của bạn, bạn có thể nhận được kết quả đăng nhập bằng cách gọi 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.
  });

    Quy trình bật lên

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

  5. 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 tại bằng cách sử dụng linkWithRedirect() và linkWithPopup() , đồng thời xác thực lại người dùng bằng reauthenticateWithRedirect() và reauthenticateWithPopup() , có thể được sử dụng để truy xuất thông tin đăng nhập mới cho các hoạt động nhạy cảm yêu cầu đăng nhập gần đây.

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

Nếu bạn đã triển khai quy trình đăng nhập OpenID Connect trong ứng dụng của mình, bạn có thể sử dụng trực tiếp mã thông báo ID để xác thực với 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.
    });