Iniciar sessão de utilizadores com o OIDC

Este documento mostra como usar a Identity Platform para iniciar sessão de utilizadores com um fornecedor do OpenID Connect (OIDC).

Antes de começar

  1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.
  2. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Roles required to select or create a project

    • Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
    • Create a project: To create a project, you need the Project Creator (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

    Go to project selector

  3. Verify that billing is enabled for your Google Cloud project.

  4. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Roles required to select or create a project

    • Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
    • Create a project: To create a project, you need the Project Creator (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

    Go to project selector

  5. Verify that billing is enabled for your Google Cloud project.

  6. Ative a Identity Platform e adicione o SDK do cliente à sua app. Consulte o Início rápido para saber como.
  7. Configurar o fornecedor

    1. Aceda à página Fornecedores de identidade na Google Cloud consola.
      Aceda à página Fornecedores de identidade

    2. Clique em Adicionar um fornecedor e selecione OpenID Connect na lista.

    Fluxo do código de autorização

    1. Introduza os seguintes detalhes para ativar o fluxo do código de autorização:

      1. Selecione Fluxo de código na secção Escolher tipo de autorização.

      2. O Nome do fornecedor. Pode ser igual ao ID do fornecedor ou um nome personalizado. Se introduzir um nome personalizado, clique em Editar junto a ID do fornecedor para especificar o ID (que tem de começar por oidc.).

      3. O ID de cliente do fornecedor.

      4. O emissor do fornecedor. Deve ter um aspeto semelhante a https://example.com. A Identity Platform usa este URL para localizar o documento de descoberta do OIDC (normalmente encontrado em /.well-known/openid-configuration), que especifica os pontos finais OAuth e as chaves públicas do fornecedor.

      5. O segredo do cliente do fornecedor.

    2. Adicione a sua app à lista de Domínios autorizados. Por exemplo, se o URL de início de sessão da sua app for https://example.com/login, adicione example.com.

    3. Configure o URL de retorno do Identity Platform como um URL de redirecionamento com o seu fornecedor de OIDC. O URL deve ser semelhante a https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

    4. Clique em Guardar.

    Fluxo implícito

    1. Introduza os seguintes detalhes para ativar o fluxo implícito:

      1. Selecione Fluxo implícito na secção Escolher tipo de autorização.

      2. O Nome do fornecedor. Pode ser igual ao ID do fornecedor ou um nome personalizado. Se introduzir um nome personalizado, clique em Editar junto a ID do fornecedor para especificar o ID (que tem de começar por oidc.).

      3. O ID de cliente do fornecedor.

      4. O emissor do fornecedor. Deve ter um aspeto semelhante a: https://example.com. A Identity Platform usa este URL para localizar o documento de descoberta OIDC (normalmente encontrado em /.well-known/openid-configuration), que especifica os pontos finais OAuth e as chaves públicas do fornecedor.

    2. Adicione a sua app à lista de Domínios autorizados. Por exemplo, se o URL de início de sessão da sua app for https://example.com/login, adicione example.com.

    3. Configure o URL de retorno do Identity Platform como um URL de redirecionamento com o seu fornecedor de OIDC. O URL deve ser semelhante a https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

    4. Clique em Guardar.

    Iniciar sessão de utilizadores

    Existem duas formas de iniciar sessão de utilizadores com o OIDC:

    • Usando o fluxo OAuth. Desta forma, conclui a troca de informações OAuth por si. Com base na seleção do fluxo de código de autorização/fluxo implícito no passo de configuração do fornecedor, o servidor GCIP escolhe o fluxo pretendido para comunicar com o fornecedor de identidade.

    • Usando o token de ID do fornecedor OIDC. Este método pressupõe que já tem um token OIDC disponível.

    Iniciar sessão de utilizadores com o OAuth

    Para iniciar sessão através do OAuth:

    1. Crie uma instância OAuthProvider com o ID do fornecedor que configurou na secção anterior. O ID do fornecedor tem de começar com oidc..

      Versão Web 9

      import { OAuthProvider } from "firebase/auth";
      
      const provider = new OAuthProvider("oidc.myProvider");

      Versão Web 8

      const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
    2. Inicie o fluxo de início de sessão. Pode optar por usar um pop-up ou um redirecionamento.

      Versão Web 9

      import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // User is signed in.
          const credential = OAuthProvider.credentialFromResult(result);
          // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = OAuthProvider.credentialFromError(error);
          // Handle / display error.
          // ...
        });

      Versão Web 8

      firebase.auth().signInWithPopup(provider)
        .then((result) => {
          // User is signed in.
          // result.credential is a firebase.auth().OAuthCredential object.
          // result.credential.providerId is equal to 'oidc.myProvider'.
          // result.credential.idToken is the OIDC provider's ID token.
        })
        .catch((error) => {
          // Handle error.
        });

      Redirecionar

      Para redirecionar para uma página de início de sessão, chame signInWithRedirect():

      Versão Web 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Versão Web 8

      firebase.auth().signInWithRedirect(provider).catch((error) => {
        // Handle error.
      });

      Em seguida, chame getRedirectResult() para obter os resultados quando o utilizador regressar à sua app:

      Versão Web 9

      import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // User is signed in.
          const credential = OAuthProvider.credentialFromResult(result);
          // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
        })
        .catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = OAuthProvider.credentialFromError(error);
          // Handle / display error.
          // ...
        });

      Versão Web 8

      // On return.
      firebase.auth().getRedirectResult()
        .then((result) => {
          // User is signed in.
          // result.credential is a firebase.auth().OAuthCredential object.
          // result.credential.providerId is equal to 'oidc.myProvider'.
          // result.credential.idToken is the OIDC provider's ID token.
        })
        .catch((error) => {
          // Handle / display error.
          // ...
        });

    No final de qualquer um dos fluxos, pode obter o token de ID OIDC através do campo result.credential.idToken.

    Iniciar sessão de utilizadores diretamente

    Para iniciar sessão num utilizador diretamente com um token de ID OIDC, faça o seguinte:

    1. Inicialize uma instância OAuthProvider com o ID do fornecedor que configurou na secção anterior. O ID do fornecedor tem de começar com oidc.. Em seguida, crie um OAuthCredential e chame signInWithCredential() para que o utilizador inicie sessão.

      Versão Web 9

      import { getAuth, OAuthProvider, signInWithCredential } from "firebase/auth";
      
      const auth = getAuth();
      const credential = provider.credential({
        idToken: oidcIdToken,
      });
      signInWithCredential(auth, credential)
        .then((result) => {
          // User is signed in.
          const newCredential = OAuthProvider.credentialFromResult(result);
          // This gives you a new access token for the OIDC provider. You can use it to directly interact with that provider.
        })
        .catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = OAuthProvider.credentialFromError(error);
          // Handle / display error.
          // ...
        });

      Versão Web 8

      const credential = provider.credential(oidcIdToken, null);
      
      firebase.auth().signInWithCredential(credential)
        .then((result) => {
          // User is signed in.
          // User now has a odic.myProvider UserInfo in providerData.
        })
        .catch((error) => {
          // Handle / display error.
          // ...
        });

    Associar contas de utilizador

    Se um utilizador já tiver iniciado sessão na sua app através de um método diferente (como email/palavra-passe), pode associar a respetiva conta existente ao fornecedor de OIDC através de linkWithPopup() ou linkWithRedirect(): Por exemplo, podemos associar a uma Conta Google:

    Versão Web 9

    import { getAuth, linkWithPopup, GoogleAuthProvider } from "firebase/auth";
    const provider = new GoogleAuthProvider();
    
    const auth = getAuth();
    linkWithPopup(auth.currentUser, provider).then((result) => {
      // Accounts successfully linked.
      const credential = GoogleAuthProvider.credentialFromResult(result);
      const user = result.user;
      // ...
    }).catch((error) => {
      // Handle Errors here.
      // ...
    });

    Versão Web 8

    auth.currentUser.linkWithPopup(provider).then((result) => {
      // Accounts successfully linked.
      var credential = result.credential;
      var user = result.user;
      // ...
    }).catch((error) => {
      // Handle Errors here.
      // ...
    });

    O que se segue?