↓↓クリックして頂けると励みになります。
【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」を追加します。
テスト申請には２週間ほどかかるようですが、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メール】
