🌊

ユーザのサインアップの設計

2024/04/09に公開
1

Google OAuth2.0を使用した組織内アカウント限定のセットアップ

はじめに

この記事では、特定のドメインに限定したGoogle社内アカウントでのサインアップとログイン方法について解説します。この方法を利用することで、組織外のアカウントによるアクセスを防ぐことができます。

自己紹介

とある長期インターンでSaaSの作成を行っています!

残念ながらひとりで作成中です...

経験もSQLとGAS, Pythonのスクレイピングのみ...

とほほ...

設計の概要

Google OAuth2.0 (OIDC)を用いて、初回のサインアップ時のみ認証を行います。このプロセスでは、ユーザーがhttps://サイトの名前.com/signupにアクセスすると、自動的にGoogleのログインページにリダイレクトされ、組織内のGoogleアカウントで認証を行います。

認証後、ユーザーはhttps://サイトの名前.com/signup/usersetにリダイレクトされ、パスワードや所属教室、役割などの追加情報を設定します。この情報はサーバーサイドで処理され、データベースに新しいユーザーとして登録されます。

この設計を採用した主な理由は、ユーザーが毎回Googleアカウントでログインする手間を省くためです。特に多くのページリダイレクトが必要となるネットワーク環境では、この方法が便利です。

ログインプロセスの比較

  • Google OAuth2.0を使用する場合:

    1. ログインボタンをクリック
    2. Googleの認証画面にリダイレクト
    3. Emailとパスワードでログイン
    4. ウェブアプリのダッシュボードへアクセス
  • 自前のログイン方法:

    1. ログインボタンをクリック
    2. Emailとパスワードを入力
    3. ウェブアプリのダッシュボードへアクセス

ページ遷移を減らし、よりシンプルなログインプロセスを提供することで、ユーザーエクスペリエンスが向上します。また、Google依存を減らすことで、Google OAuth2.0の使用頻度に関する懸念も軽減されます。

シーケンス図

次の図は、サインアップとユーザー設定プロセスのシーケンスを示しています。

Discussion

りょうすけりょうすけ

SignUp限定にすることによってOIDCによるURLが汚くなる現象を避けたいから