GitHub ログインを連携する

お客さまが GitHub アカウントで登録できるようにするには、まず GitHub 側に自分のサービスを登録して、二つの値を受け取る必要があります。Client ID と Client secret です。

このページは、その二つの値を受け取る手順を案内します。受け取った値を WEEGLOO に入れる方法は受け取った値を WEEGLOO に入れるにあります。

先にコピーしておくアドレス

お客さまが GitHub でログインを終えると、GitHub はその結果を決まったアドレスへ返します。このアドレスを GitHub に登録する必要があるので、先にコピーしておいてください。1 番目のステップで貼り付けます。

下で自分の Space を選ぶと、識別子が埋まったアドレスになります。

Space
https://auth.weegloo.com/v1/spaces/{spaceId}/login/oauth2/code/github

自分で埋めたい場合は、{spaceId} のところに自分の Space の識別子を入れてください。コンテンツスタジオでその Space を開いてブラウザのアドレスバーを見ると、/spaces/ の次に来る値が識別子です。

このアドレスは自分のサイトのアドレスではなく、WEEGLOO がログイン結果を受け取る場所です。ですから、自分のサイトをまだ作っていなくても今の時点で決まります。コンテンツスタジオで GitHub を有効にしていれば、Step 1 に同じアドレスが表示されるので、そこからコピーしてもかまいません。

GitHub で二つの値を受け取る

GitHub にログインしたあと、以下の二つのステップを順に進めてください。ここで行う作業に費用はかかりません。

1

OAuth App を登録する

画面に出てくる OAuth は、GitHub アカウントでログインできるようにする仕組みの名前です。二つの値は、ここで登録する一つのアプリに入っています。

  1. 開発者設定の画面(https://github.com/settings/developers)を開いてください。

  2. 左メニューで OAuth Apps を押してください。

  3. New OAuth app を押してください。

    OAuth Apps の画面。左メニューに GitHub Apps、OAuth Apps、Personal access tokens があり、一覧は空で New OAuth app ボタンが表示されています

  4. Application name に、お客さまに見せる名前を入力してください(例: ぬくもりクローゼット)。

  5. Homepage URL に自分のサイトのアドレスを入力してください(例: https://nukumori-closet.com)。

  6. Redirect URI の欄に、先にコピーしておくアドレスでコピーしたアドレスを貼り付けてください。

  7. Register application を押してください。

    Register a new OAuth app のフォーム。Application name に「ぬくもりクローゼット」、Homepage URL にサイトのアドレス、Redirect URI に WEEGLOO のアドレスが入力されています

まだサイトを作っていない場合は、Homepage URL にこれから使うアドレスを書いておいてください。あとから修正できます。Application description は任意の項目で、書くとお客さまにそのまま表示されるので、お客さまが読む文章として書いてください。

2

Client ID と Client secret をコピーする

Register application を押すと、いま登録したアプリの設定画面が開きます。二つの値のうち Client ID はここにすでに表示されていて、secret はボタンを押していま作ります。

  1. Client ID に書かれている値をコピーしておいてください。

  2. Client secrets の見出しの右にある Generate a new client secret を押してください。

    登録直後のアプリ設定画面。Client ID の値が見えていて、Client secrets の見出しの右に Generate a new client secret ボタンがあります

  3. 作られた値の右にあるコピーアイコンを押して、secret をコピーしておいてください。

    secret を作成した直後の画面。青い案内とともに Client secret の値とコピーアイコンが見えます

この画面を離れると secret を二度と見られません

Client ID はこの画面に残り続けるので、いつでも見直せますが、secret はそうではありません。なくした場合は Generate a new client secret で新しく作り、受け取り直した値を WEEGLOO にもう一度入力してください。secret は名前のとおり秘密の値です。他の人に教えたり、公開された場所に書き残したりしないでください。

ログインにはメールアドレスの公開が必要です

GitHub ログインには条件が一つ付きます。ログインする GitHub アカウントが、メールアドレスを公開している必要があります。

WEEGLOO は、お客さまが GitHub でログインするときにそのアカウントの公開メールアドレスもあわせて受け取り、会員に保存します。同じ Space では一つのメールアドレスで一度だけ登録できます。公開メールアドレスを指定していないアカウントではこの値が渡されず、そこで登録が止まります。

止まると、お客さまは WEEGLOO が表示する案内画面を見ることになります。メールアドレスを取得できなかったことと、何をすればよいかがお客さまの言語で書かれていて、自分のサイトへ戻るボタンも付いています。

メールアドレスを取得できなかったという WEEGLOO の案内画面。理由の説明とともに最初に戻るボタンがあります

このときログイン結果は自分のサイトまで届きません。ですから、自分のサイトのコードではこの状況に気づくことも、代わりに処理することもできません。

解決するのはお客さまです。お客さまが GitHub アカウントの設定(https://github.com/settings/profile)で Public profile を開くと、Public email の項目があります。ここで表示するメールアドレスを選べば、次のログインから通ります。まだ選んでいないアカウントには Select a verified email to display とだけ書かれています。

GitHub のプロフィール設定画面。左メニューで Public profile が選ばれていて、Public email の下のドロップダウンに Select a verified email to display が表示されています

自分のサイトでできるのは、GitHub でログインする場所にこの条件をあらかじめ書いておき、お客さまが行き詰まる前に知らせることです。

受け取った値を WEEGLOO に入れる

これで二つの値が手元にあります。ここから先は、これまでどのように作業してきたかによって分かれます。

コンテンツスタジオで直接設定していた場合は、次のように進めてください。

  1. サービス会員ログインのソーシャルログインを有効にする手順に戻ってください。
  2. GitHub を有効にしてください。
  3. Step 2 の Client ID の欄に Client ID を入力してください。
  4. Client Secret の欄に Client secret を入力してください。
  5. 保存 を押してください。

AI エージェントに連携を任せていて、値を受け取ってくるように案内された場合は、受け取った二つの値をそのままチャットに貼り付けて、作業を続けてください。残りの設定はエージェントが引き続き処理します。

次にやること

  • サービス会員ログイン: 受け取った値をコンテンツスタジオに入力し、会員ログインの残りの設定を終えます。
  • 会員のロールと権限: 登録した会員が何を見て使えるかを定める ServiceUserRole を作ります。
  • Auth API: ログインを自分のサイトのコードに組み込むときに必要となる、リクエスト形式などの技術仕様を扱います。