Héberger une page de connexion avec Cloud Run

Pour utiliser des identités externes avec Identity Aware Proxy (IAP), votre application doit disposer d'une page de connexion. IAP redirige les utilisateurs vers cette page afin qu'ils puissent s'authentifier et ainsi accéder à des ressources sécurisées.

Cet article vous explique comment déployer et personnaliser une page de connexion prédéfinie à l'aide de Cloud Run. Il s'agit du moyen le plus rapide pour commencer à utiliser des identités externes, et ne nécessite pas d'écriture de code.

Vous pouvez également créer vous-même une page de connexion. Créer votre propre page est plus compliqué, mais cela vous permet de mieux contrôler le flux d'authentification et l'expérience utilisateur. Pour en savoir plus, consultez les pages Créer une page de connexion avec FirebaseUI et Créer une page de connexion personnalisée.

Avant de commencer

Tester la page de connexion

La page de connexion initiale créée par IAP est entièrement opérationnelle. Pour la tester :

  1. Accédez à une ressource protégée par IAP. Vous devriez être redirigé automatiquement vers la page de connexion.

  2. Sélectionnez un locataire et un fournisseur avec lesquels vous connecter. Si aucun locataire ni aucun fournisseur n'est répertorié, vérifiez que vous en avez configuré un à l'aide d'Identity Platform.

  3. Connectez-vous avec vos identifiants.

Vous devriez être redirigé vers la ressource protégée.

Personnaliser la page de connexion

Vous pouvez personnaliser la page de connexion à l'aide d'un fichier de configuration JSON. Vous disposez, par exemple, des possibilités suivantes :

  • Ajout d'un en-tête et d'un logo à la page de connexion.
  • Spécifier les locataires et les fournisseurs disponibles.
  • Personnaliser les icônes et le style de chaque bouton locataire et fournisseur.
  • Ajouter des liens vers les règles de confidentialité et les conditions d'utilisation de votre application.

Les sections suivantes expliquent comment accéder au fichier de configuration JSON et le mettre à jour.

Obtenir un jeton d'accès

Pour administrer la page de connexion, vous avez besoin d'un jeton d'accès Google. Le moyen le plus simple d'en obtenir un consiste à activer Google en tant que fournisseur pour Identity Platform. Si votre application utilise déjà Google comme fournisseur d'identité, vous pouvez ignorer cette section.

  1. Accédez à la page Fournisseurs Identity Platform dans Cloud Console.

    Accéder à la page "Fournisseurs Identity Platform"

  2. Cliquez sur Ajouter un fournisseur.

  3. Sélectionnez Google dans la liste des fournisseurs.

  4. Configurez l'ID du client Web et le code secret du client Web :

    1. Dans un autre onglet, ouvrez la page IAP.

      Accéder à la page "IAP"

    2. Développez le menu Afficher plus pour votre ressource, puis cliquez sur Modifier le client OAuth.

    3. Copiez les champs ID client et Code secret du client dans la configuration du fournisseur Google pour Identity Platform.

    4. Ajoutez l'URL de redirection Identity Platform à la liste des URI de redirection autorisés pour le client OAuth. L'URL est au format https://<var>PROJECT_ID</var>.firebaseapp.com/__/auth/handler.

  5. Cliquez sur Enregistrer sur les deux pages.

Se connecter au panneau d'administration

La configuration JSON pour la page de connexion est hébergée par Cloud Run. Pour accéder au panneau, procédez comme suit. Notez que vous aurez besoin du rôle Administrateur de l'espace de stockage (roles/storage.admin).

  1. Accédez à la page IAP dans Cloud Console.

    Accéder à la page "IAP"

  2. Sélectionnez votre ressource dans la liste.

  3. Lancez l'URL répertoriée sous Personnaliser la page dans le panneau d'informations. Elle doit se présenter comme ceci : https://servicename-xyz-uc.a.run.app/admin.

  4. Connectez-vous avec le compte Google que vous avez utilisé pour configurer IAP. Le fichier de configuration JSON s'affiche dans un éditeur de texte.

Modifier la configuration

Le schéma de configuration de la page de connexion est basé sur FirebaseUI et hérite d'un grand nombre de ses propriétés. Le code suivant montre un exemple de configuration avec deux locataires :

{
  "AIzaSyC5DtmRUR...": {
    "authDomain": "awesomeco.firebaseapp.com",
    "displayMode": "optionFirst",
    "selectTenantUiTitle": "Awesome Company Portal",
    "selectTenantUiLogo": "https://awesome.com/abcd/logo.png",
    "styleUrl": "https://awesome.com/abcd/overrides/stylesheet.css",
    "tosUrl": "https://awesome.com/abcd/tos.html",
    "privacyPolicyUrl": "https://awesome.com/abcd/privacypolicy.html",
    "tenants": {
      "tenant-a-id": {
        "fullLabel": "Company A Portal",
        "displayName": "Company A",
        "iconUrl": "https://companya.com/img/icon.png",
        "logoUrl": "https://companya.com/img/logo.png",
        "buttonColor": "#007bff",
        "signInOptions": [
          "password",
          "facebook.com",
          "google.com",
          "microsoft.com",
          {
            "provider": "saml.okta-cicp-app",
            "providerName": "Corp Account",
            "fullLabel": "Employee Corporate Login",
            "buttonColor": "#ff0000",
            "iconUrl": "https://companya.com/abcd/icon-1.png"
          },
          {
            "provider": "oidc.okta-oidc",
            "providerName": "Contractor Account",
            "fullLabel": "Contractor Account Portal",
            "buttonColor": "#00ff00",
            "iconUrl": "https://companya.com/abcd/icon-2.png"
          }
        ],
        "tosUrl": "https://companya.com/abcd/tos.html",
        "privacyPolicyUrl": "https://companya.com/abcd/privacypolicy.html"
      },
      "tenant-b-id": {
        "fullLabel": "Company B Portal",
        "displayName": "Company B",
        "iconUrl": "https://companyb.com/img/icon.png",
        "logoUrl": "https://companyb.com/img/logo.png",
        "buttonColor": "#007bff",
        "immediateFederatedRedirect": true,
        "signInOptions": [
          {
            "provider": "saml.okta-bla-app",
            "providerName": "Corp Account",
            "buttonColor": "#0000ff",
            "iconUrl": "https://companyb.com/abcd/icon.png"
          }
        ],
        "tosUrl": "https://companyb.com/abcd/tos.html",
        "privacyPolicyUrl": "https://companyb.com/abcd/privacypolicy.html"
      }
    }
  }
}

Pour obtenir la liste complète des propriétés disponibles, consultez la documentation de référence.

Ignorer CSS

Vous pouvez utiliser la propriété styleUrl pour spécifier un fichier CSS personnalisé. Les styles de ce fichier remplacent la feuille de style CSS par défaut. Le fichier doit être accessible publiquement via HTTPS (par exemple, hébergé dans un bucket Cloud Storage).

L'exemple suivant montre comment remplacer le CSS par défaut :

/** Change header title style. */
.heading-center {
  color: #7181a5;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
}

/** Use round edged borders for container. */
.main-container {
  border-radius: 5px;
}

/** Change page background color. */
body {
  background-color: #f8f9fa;
}

Redéployer l'instance Cloud Run

Dans certains cas, il peut être judicieux de redéployer l'instance Cloud Run qui héberge la page de connexion. Exemples de scénarios :

  • Ajouter, modifier ou supprimer des fournisseurs d'identité
  • Modifier les configurations de locataires
  • Définir des variables d'environnement
  • Mettre à jour l'image du conteneur vers la dernière version

La mise à jour et le redéploiements réguliers de l'image du conteneur vous permettent de bénéficier des dernières corrections de bug et des derniers correctifs de sécurité. Vous pouvez consulter la liste des modifications entre les versions sur GitHub.

Vous pouvez obtenir la version actuelle du conteneur déployé à l'aide du point de terminaison /versionz. Exemple :

curl 'https://servicename-xyz-uc.a.run.app/versionz'

Pour redéployer l'instance Cloud Run, procédez comme suit :

  1. Accédez à la page Cloud Run de Cloud Console.

    Accéder à la page Cloud Run

  2. Sélectionnez l'instance hébergeant la page de connexion.

  3. Cliquez sur Modifier et déployer la nouvelle révision.

  4. Vous pouvez également spécifier des paramètres avancés pour la révision, ou ajouter une variable d'environnement en cliquant sur l'onglet Variables et secrets.

  5. Cliquez sur Déployer.

Options avancées

Personnaliser la page de connexion par programmation

En plus d'utiliser la console /admin, vous pouvez mettre à jour la configuration JSON par programmation.

Pour obtenir la configuration actuelle, utilisez le point de terminaison /get_admin_config. Exemple :

curl -H 'Authorization: Bearer [TOKEN]'
  'https://servicename-xyz-uc.a.run.app/get_admin_config'

Pour mettre à jour la configuration, utilisez /set_admin_config. Exemple :

curl -XPOST -H 'Authorization: Bearer [TOKEN]' -H "Content-type: application/json"
  -d '[UPDATED-CONFIG]' 'https://servicename-xyz-uc.a.run.app/set_admin_config'

Les deux appels REST nécessitent le champ d'application https://www.googleapis.com/auth/devstorage.read_write. Un jeton OAuth valide doit être associé à l'en-tête Authorization.

Définir des variables d'environnement

Vous pouvez définir des variables d'environnement sur l'instance Cloud Run pour personnaliser les paramètres avancés. Le tableau suivant répertorie les variables disponibles :

Variable Description
DEBUG_CONSOLE Valeur booléenne (0 ou 1) indiquant s'il faut consigner toutes les erreurs et tous les détails de la requête réseau. Les données sensibles ne seront pas consignées. Elle est désactivée (0) par défaut.
UI_CONFIG Chaîne contenant la configuration JSON de la page de connexion. L'utilisation de cette variable au lieu du panneau /admin évite la lecture et l'écriture dans un bucket Cloud Storage lors de l'accès à la configuration. Les configurations non valides sont ignorées. L'utilisation du panneau /admin pour valider votre fichier JSON avant de définir cette variable peut contribuer à réduire les erreurs de syntaxe.
GCS_BUCKET_NAME Chaîne remplaçant le bucket Cloud Storage par défaut utilisé pour stocker la configuration JSON. Le fichier est nommé config.json et son emplacement par défaut est gcip-iap-bucket-[CLOUD-RUN-SERVICE-NAME]-[PROJECT-NUMBER].
ALLOW_ADMIN Valeur booléenne (0 ou 1) indiquant s'il faut autoriser l'accès au panneau de configuration /admin. Activé par défaut (1)

Vous devrez déployer une nouvelle révision de l'instance Cloud Run après la mise à jour des variables pour que les modifications prennent effet. Pour en savoir plus sur les variables d'environnement, consultez la documentation Cloud Run.

Personnaliser le domaine

Par défaut, les utilisateurs voient l'URL de l'instance Cloud Run lorsqu'ils se connectent. Pour spécifier un domaine personnalisé, procédez comme suit :

  1. Suivez les étapes décrites dans la section Mapper des domaines personnalisés pour définir un domaine personnalisé pour l'instance Cloud Run.

  2. Configurez IAP pour utiliser la nouvelle URL d'authentification :

    1. Accédez à la page IAP dans Cloud Console.

      Accéder à la page "IAP"

    2. Sélectionnez la ressource protégée par IAP.

    3. Dans le panneau latéral, sélectionnez l'icône Modifier à côté du champ URL de connexion.

    4. Sélectionnez Utiliser une page de connexion hébergée existante, puis choisissez votre domaine dans le menu déroulant.

    5. Cliquez sur Save.

Utiliser une page de connexion pour plusieurs ressources IAP

Vous pouvez protéger plusieurs ressources IAP à l'aide de la même page de connexion. Cela réduit le travail associé à la gestion de plusieurs configurations.

Pour réutiliser une page de connexion :

  1. Suivez les étapes décrites de cet article pour déployer la page d'authentification de la première ressource protégée par IAP.

  2. Activez IAP pour la deuxième ressource. Lorsque vous êtes invité à spécifier une page de connexion, sélectionnez Je fournis ma propre page, puis, dans le champ URL, saisissez l'URL du service Cloud Run.

  3. Redéployez le service Cloud Run.

Étape suivante