WebサイトにGithubアカウントでログインする機能を実装する[準備編]

2020年6月12日2020年6月14日ツール関連

先日、ウェブサイトにグーグルアカウントでログインする機能を実装しましたが、今回はその第二弾

Githubアカウントを使ってログイン認証する機能の実装方法を説明します

今回はその準備編です

ちなみにグーグルアカウントでログインする機能を実装する方法はこちらです

Githubでログイン

ログイン画面にたまに見かけるこいつのことです

このボタンをクリックすると、ユーザ登録をせずにGIthubのアカウントを使ってログイン認証できるってわけですね

事前準備

Githubアカウントの登録

Githubの開発者向け機能を利用するので、当然ですがGIthubでアカウント登録が必要になります

アカウントを持っていない方は、まずはこちらのページ右上にある「SIgn up」から、適当にアカウントを登録してください

アカウントを登録するだけなら、そこまで迷うことはありませんからやり方は割愛します

（決して手を抜いてるわけじゃありません！）

アプリの登録

登録画面への行き方

続いて、Githubのログイン認証を必要とするウェブサイト情報を登録します

Githubにログインして、一番右上にあるアイコンをクリック

開いたメニューのうち、「Settings」を選択します

Personal settingsの一番下にある「Developer settings」をクリック

Developer settings内のメニューから「OAuth Apps」->「Register a new application」と選択していきます

登録画面で入力する項目

認証アプリの登録画面が開くので、各項目に入力していきます

「Application name」はアプリを識別するための名前ですが、認証画面でユーザに表示されます

「Homepage URL」は、ログイン認証を利用したいホームページのURLです（例：https://example.com）

「Application description」は任意なので、未入力でもOK

「Authorization callback URL」は、ログイン認証が終わった後にコールバックするURLです

入力が終わったら「Register application」ボタンを押下します

登録完了

無事に登録が完了すると、こんな感じの画面になります

クライアントIDとクライアントシークレットが表示されていますが、これは後の実装編で使用します

とりあえず準備編はここまでです

実装編はこちら