[Django]GoogleとGitHubからログイン

Django

django-allauth」とは「Djnago」で簡単にログイン機能を組み込むことができるものです。

そして「django-allauth」は「Gmail」や「GitHub」からもログインできる機能があります。

他にも「Twitter」や「instagram」からもログインできるので、詳しくは公式ページを参考にしてください。

Installation — django-allauth 0.43.0 documentation

では早速「Google」と「GitHub」からログインできるように設定していきましょう。

GitHub

GitHunの設定

まずは「GitHub」の設定をしていきます。

こちらから「GitHub」のログインしてください。

ログインできたら、右上の自分のアイコンから「Settings」をクリックしてください。

右にあるサイドバーから、「Developer settings」をクリックしてください。

さらに右にあるサイドバーから、「OAuth Apps」をクリックしてください。

右上にある「New OAuth App」をクリックして、必要な情報を入力していきます。

① 好きな名前を入れてください。アプリ名などが無難です。

② 公開しているWebアプリであれば、そのURLを入力してください。開発中であれば「https://localhost:8000」などが良いです。

③ アプリの詳細を記載してください。

④ ログインが成功した時のリダイレクト先URLを指定します。「https://localhost:8000/accounts/github/login/callback/」と入力してください。公開している場合は「https://localhost:8000」の部分を自分のURLに変換してください。

Client ID」と「Client secrets」を控えておきましょう。

settings.pyの編集

settings.py」に必要なものを追記していきます。

以下を「settings.py」に追加してください。

INSTALLED_APPS = [
    ・
    ・
    ・
    'allauth.socialaccount.providers.gitlab',
]

管理画面から登録

管理画面から「GitHub」に繋げられるように設定していきます。

http://127.0.0.1:8000/admin

上記にアクセスして、管理画面にログインしてください。

Social application」をクリックして、右上の「SOCIAL APPLOCATIONを追加」をクリックしてください。

① 「GitHub」を選択。

② 自由な名前を入力して良いですが、「GitHub」が無難です。

③ 先ほどコピーした「Client ID」を貼り付けてください。

④ 先ほどコピーした「Client secrets」を貼り付けてください。

⑤ 空白で良いです。

一番最後の部分は「sample.com」を選択して、「」があれば押し、なければ「」を押して「保存」を押しましょう。

これで完了です!

http://127.0.0.1:8000/accounts/login/

にアクセスして、「GitHub」をクリックしてログインしてみましょう!

Google

Google Cloud Platformに登録

Google Cloud プラットフォーム
Google Cloud Platform では、Google と同じインフラストラクチャでアプリケーション、ウェブサイト、サービスを構築、導入、拡大することができます。

上記にアクセスして登録していきましょう。

Google Cloud Platform」の名前の横の部分をクリックしてください。

新しいプロジェクト」をクリックしてください。

プロジェクト名にアプリ名などの好きな名前を入力し、「作成」を押してください。

左サイドバーの「OAuth同意画面」から自分にあうように入力してください。

承認済みドメイン」は「google.com」とかで問題ないです。

最初のページ以外は「保存して次へ」を押して、「保存」しましょう。

次に「認証情報」から「+認証情報を作成」の「OAuthクライアントID」をクリックしてください。

① 「アプリケーションの種類」は「ウェブアプリケーション」を選択してください。

② 好きな名前を入力しましょう。

③ 「承認済みのリダイレクトURL」の「+URLを追加」から「http://localhost:8000/accounts/google/login/callback/」を入力しましょう。

作成」を押しましょう。

クライアントID」と「クライアントシークレット」を控えておきましょう。

settings.pyの編集

次は「settings.py」に追記していきます。

次のように追記してください。

INSTALLED_APPS = [
    ・
    ・
    ・
    # 追記
    'allauth.socialaccount.providers.google',
]

・
・
・
# 追記
SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'SCOPE': [
            'profile',
            'email',
        ],
        'AUTH_PARAMS': {
            'access_type': 'online',
        }
    }
}

上記を追記してください。

管理画面から登録

管理画面から「Google」に繋げられるように設定していきます。

http://127.0.0.1:8000/admin

上記にアクセスして、管理画面にログインしてください。

Social application」をクリックして、右上の「SOCIAL APPLOCATIONを追加」をクリックしてください。

① 「Google」を選択。

② 自由な名前を入力して良いですが、「Google」が無難です。

③ 先ほどコピーした「クライアントID」を貼り付けてください。

④ 先ほどコピーした「クライアントシークレット」を貼り付けてください。

一番最後の部分は「sample.com」を選択して、「」があれば押し、なければ「」を押して「保存」を押しましょう。

これで完了です!

http://127.0.0.1:8000/accounts/login/

にアクセスして、「Google」をクリックしてログインしてみましょう!

最後に

今回は「dajngo-allauth」を使用して、「GitHub」と「Google」からログインする方法を確認してきました。

うまくいかずエラーにつまずこともあると思いますが、そのときはググってみるか、下のTwitterのDMから相談してください!

今後も記事を更新していくので、よければ見ていってください!

それでは!

コメント

タイトルとURLをコピーしました