↓↓クリックして頂けると励みになります。
【09 | サインアップ】 << 【ホーム】 >> 【11 | Gメール】
まずは「Meta for Developers」のトップページに移動します。
developers.facebook.com
「利用を開始する」をクリックします。
次へ進みます。
携帯電話を入力し、SMSを送信することでアカウント認証を行います。
認証コードを入力して次へ
メールアドレス認証します。
当てはまるものにチェックを入れて登録してください。
右上の「マイアプリ」をクリックします。
「アプリを作成」をクリックします。
アプリタイプを選択します。
「ユーザーにFacebookアカウントでのログインを許可する」を選択して次に進みます。
左メニューの「設定」の「ベーシック」をクリックします。
「アプリID」と「app secret」の値をコピーして保存して下さい。
「設定」の「ベーシック」の下部にある「プラットフォームを追加」をクリックします。
「Website」を選択して「次へ」をクリックします。
サイトURLにhttp://localhost:8000/と入力して保存します。
ダッシュボードの「ユースケース」をクリックします。
認証とアカウント作成の「編集」をクリックします。
emailの「追加」をクリックして「テスト準備完了」にします。
ユースケースの「追加のFacebookユーザーデータをパーソナライゼーションに使用」の「追加」をクリックし、「user_link」と「user_photos」を追加します。
テスト申請には2週間ほどかかるようですが、Facebookログイン機能を試すには問題ありません。
「プライバシーポリシーのURL」に「http://licalhost:8000/」と入力して保存します。
「social-auth-app-django」をインストールします。
コマンド
pip install social-auth-app-django==4.0.0
「requirements.txt」ファイルを作成し、内容を確認します。
コマンド
pip freeze > requirements.txt
内容確認 【Desktop/crowdsource/requirements.txt】
asgiref==3.7.2 beautifulsoup4==4.12.2 certifi==2023.7.22 cffi==1.15.1 charset-normalizer==3.2.0 cryptography==41.0.3 defusedxml==0.7.1 Django==3.2.20 django-bootstrap4==2.3.1 idna==3.4 oauthlib==3.2.2 pycparser==2.21 PyJWT==2.8.0 python3-openid==3.2.0 pytz==2023.3 requests==2.31.0 requests-oauthlib==1.3.1 six==1.16.0 social-auth-app-django==4.0.0 social-auth-core==4.4.2 soupsieve==2.5 sqlparse==0.4.4 typing_extensions==4.7.1 urllib3==2.0.4
「crowdsource/settings.py」ファイルに記述を追加します。
記述追加 【Desktop/crowdsource/crowdsource/settings.py】42行目
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'core', 'bootstrap4', 'social_django', #追加 ]
マイグレーションを適用します。
コマンド
python manage.py migrate
「crowdsource/settings.py」ファイルに記述を追加します。
記述追加 【Desktop/crowdsource/crowdsource/settings.py】68,69行目
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', 'social_django.context_processors.backends', #追加 'social_django.context_processors.login_redirect', #追加 ], }, }, ]
「SOCIAL_AUTH_FACEBOOK_KEY」には先ほど設定したFacebookアプリIDを、「SOCIAL_AUTH_FACEBOOK_SECRET」にはapp secretを入力してください。
記述追加 【Desktop/crowdsource/crowdsource/settings.py】136行目
AUTHENTICATION_BACKENDS = ( 'social_core.backends.facebook.FacebookOAuth2', 'django.contrib.auth.backends.ModelBackend', ) SOCIAL_AUTH_FACEBOOK_KEY = "ご自分のFacebookアプリIDを入力" SOCIAL_AUTH_FACEBOOK_SECRET = "ご自分のapp secretを入力" SOCIAL_AUTH_FACEBOOK_SCOPE = ['email'] SOCIAL_AUTH_FACEBOOK_PROFILE_EXTRA_PARAMS = { 'fields': 'id, name, email' }
「rowdsource/urls.py」ファイルに記述を追加します。
記述追加 【Desktop/crowdsource/crowdsource/urls.py】2, 8行目
from django.contrib import admin from django.urls import path, include from django.contrib.auth import views as auth_views from core import views urlpatterns = [ path('admin/', admin.site.urls), path('oauth/', include('social_django.urls', namespace='social')), path('', views.home), path('sign-in/', auth_views.LoginView.as_view(template_name="sign_in.html")), path('sign-out/', auth_views.LogoutView.as_view(next_page="/")), path('sign-up/', views.sign_up), path('customer/', views.customer_page), path('courier/', views.courier_page), ]
「core/templates/sign_in.html」ファイルを編集します。
記述編集 【Desktop/crowdsource/core/templates/sign_in.html】
{% extends 'base.html' %} {% load bootstrap4 %} {% block content %} <div class="container-fluid mt-5"> <div class="row justify-content-center"> <div class="col-lg-4"> <div class="card"> <div class="card-header bg-info text-light"> <div class="text-center pt-2"> <h4> {% if request.GET.next != '/courier/' %} 依頼人 {% else %} 配達人 {% endif %} </h4> </div> </div> <div class="card-body"> <form method="POST"> {% csrf_token %} {% bootstrap_form_errors form %} {% bootstrap_label "メールアドレス" %} {% bootstrap_field form.username show_label=False placeholder="メールアドレス" %} {% bootstrap_label "パスワード" %} {% bootstrap_field form.password show_label=False placeholder="パスワード" %} <button class="btn btn-info btn-block"> サインイン </button> <p class="text-center mt-3"> 登録がお済みでない方<a href="/sign-up/?next={{ request.GET.next }}"><span class="btn btn-outline-success btn-sm ml-2">新規登録</span></a> </p> <hr/> <a href="{% url 'social:begin' 'facebook' %}?next={{ request.GET.next }}" class="btn btn-outline-primary btn-block">Facebookでログイン</a> </form> </div> </div> </div> </div> </div> {% endblock %}
「core/templates/sign_up.html」ファイルを編集します。
記述編集 【Desktop/crowdsource/core/templates/sign_up.html】
{% extends 'base.html' %} {% load bootstrap4 %} {% block content %} <div class="container-fluid mt-5"> <div class="row justify-content-center"> <div class="col-lg-4"> <div class="card"> <div class="card-header bg-primary text-light"> <div class="text-center pt-2"> <h4> {% if request.GET.next != '/courier/' %} 依頼人 | 新規ユーザ登録 {% else %} 配達人 | 新規ユーザ登録 {% endif %} </h4> </div> </div> <div class="card-body"> <form method="POST"> {% csrf_token %} {% bootstrap_form form %} <button type="submit" class="btn btn-primary btn-block"> 新規ユーザ登録 </button> <p class="text-center mt-3"> 登録がお済みの方<a href="/sign-in/?next={{ request.GET.next }}"><span class="btn btn-outline-success btn-sm ml-2">ログイン</span></a> </p> <hr/> <a href="{% url 'social:begin' 'facebook' %}?next={{ request.GET.next }}" class="btn btn-outline-primary btn-block">Facebookでログイン</a> </form> </div> </div> </div> </div> </div> {% endblock %}
「core/views.py」ファイルを編集します。
記述編集 【Desktop/crowdsource/core/views.py】32行目
from django.shortcuts import render, redirect from django.contrib.auth import login from django.contrib.auth.decorators import login_required from . import forms # Create your views here. def home(request): return render(request, 'home.html') @login_required() def customer_page(request): return render(request, 'home.html') @login_required() def courier_page(request): return render(request, 'home.html') def sign_up(request): form = forms.SignUpForm() if request.method == 'POST': form = forms.SignUpForm(request.POST) if form.is_valid(): email = form.cleaned_data.get('email').lower() user = form.save(commit=False) user.username = email user.save() login(request, user, backend='django.contrib.auth.backends.ModelBackend') return redirect('/') return render(request, 'sign_up.html', { 'form': form })
以前はこれでログイン確認もできたのですが、Facebookが完全https化してしまったので、このままではログイン確認ができません。
一度サーバーを起動しなおします。
サーバ再起動
以下のアドレスをブラウザに入力します。
http://localhost:8003/
Facebookで新規登録します。
サイトにアクセスできませんと出ますので、アドレスの「https」の「s」を削除してエンターします。
http://localhost:8003/oauth/complete/facebook/?granted_sc・・・・・
これでログインを確認することができます。
↓↓クリックして頂けると励みになります。
【09 | サインアップ】 << 【ホーム】 >> 【11 | Gメール】