Django3.2 | クラウドソーシングアプリの構築 | 21 | 電話番号更新 - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

【20 | 電話番号フォーム】 << 【ホーム】 >> 【22 | Stripe】

引き続き「core/templates/customer/profile.html」ファイルを編集します。

記述編集　【Desktop/crowdsource/core/templates/customer/profile.html】

{% extends 'customer/base.html' %}
{% load bootstrap4 %}

{% block head %}
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  // ご自分のFirebaseConfigに置き換えてください。
  const firebaseConfig = {
    apiKey: "AIzaSyCGdXmGoLenh7BiRl7pGyrOS**",
    authDomain: "clowdsource-f1701.firebaseapp.com",
    projectId: "clowdsource-f1701",
    storageBucket: "clowdsource-f1701.appspot.com",
    messagingSenderId: "647885698103",
    appId: "1:647885698103:web:a8fc303ad***"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>
{% endblock %}

{% block main %}
<!-- 基本情報 -->
<b class="text-secondary">基本情報</b><br />
<div class="card bg-white mt-2 mb-5">
  <div class="card-body">
    <form method="POST" enctype="multipart/form-data">
      {% csrf_token %}
      {% bootstrap_form user_form %}
      {% bootstrap_form customer_form %}
      <input type="hidden" name="action" value="update_profile">
      <button type="submit" class="btn btn-danger">保存</button>
    </form>
  </div>
</div>

<!-- パスワード -->
<b class="text-secondary">パスワード更新</b><br />
<div class="card bg-white mt-2 mb-5">
  <div class="card-body">
    <form method="POST" enctype="multipart/form-data">
      {% csrf_token %}
      {% bootstrap_form password_form %}
      <input type="hidden" name="action" value="update_password">
      <button type="submit" class="btn btn-danger">保存</button>
    </form>
  </div>
</div>

<!-- 電話番号 -->
<b class="text-secondary">電話番号</b><br />
<div class="card bg-white mt-2 mb-5">
  <div class="card-body">

    <div id="recaptcha-container"></div>

    <div id="get-code" class="input-group mb-3 {% if request.user.customer.phone_number %} d-none {% endif %}">
      <input type="text" class="form-control" placeholder="+81+あなたの電話番号を入力">
      <div class="input-group-append">
        <button class="btn btn-info" type="button">PINコード生成</button>
      </div>
    </div>

    <div id="verify-code" class="input-group mb-3 d-none">
      <input type="text" class="form-control" placeholder="PINコード入力">
      <div class="input-group-append">
        <button class="btn btn-primary" type="button">PINコード送信</button>
      </div>
    </div>

    <div id="change-phone" class="input-group mb-3 {% if not request.user.customer.phone_number %} d-none {% endif %}">
      <input type="text" class="form-control" disabled value="{{ request.user.customer.phone_number }}">
      <div class="input-group-append">
        <button class="btn btn-danger" type="button">更新</button>
      </div>
    </div>

  </div>
</div>

<script>

  function onVerify(idToken) {
    var form = document.createElement("form");
    form.method = "POST";

    var element1 = document.createElement("input");
    element1.name = "id_token";
    element1.value = idToken;
    form.appendChild(element1);

    var element2 = document.createElement("input");
    element2.name = "action";
    element2.value = "update_phone";
    form.appendChild(element2);

    var element3 = document.createElement("input");
    element3.name = "csrfmiddlewaretoken";
    element3.value = "{{ csrf_token }}";
    form.appendChild(element3);

    document.body.appendChild(form);
    form.submit();
  }

  window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
    'size': 'invisible'
  });

  $("#get-code button").on('click', function () {
    const phoneNumber = $("#get-code input").val();
    console.log(phoneNumber);

    firebase.auth().signInWithPhoneNumber(phoneNumber, window.recaptchaVerifier)
      .then((confirmationResult) => {
        // SMS sent. Prompt user to type the code from the message, then sign the
        // user in with confirmationResult.confirm(code).
        console.log(confirmationResult);
        window.confirmationResult = confirmationResult;

        $("#get-code").addClass("d-none");
        $("#verify-code").removeClass("d-none");
      }).catch((error) => {
        // Error; SMS not sent
        toast(error.message, 'error');
      });


  });

  $("#verify-code button").on('click', function () {
    const code = $("#verify-code input").val();

    confirmationResult.confirm(code).then((result) => {
      // User signed in successfully.
      const user = result.user;
      console.log(user.phoneNumber);

      user.getIdToken().then(function (idToken) {
        onVerify(idToken);
      });
    }).catch((error) => {
      // User couldn't sign in (bad verification code?)
      toast(error.message, 'error');
    });
  });

  $("#change-phone button").on('click', function () {
    $("#change-phone").addClass("d-none");
    $("#get-code").removeClass("d-none");
  })
</script>



{% endblock %}

「core/customer/views.py」ファイルを編集します。

記述編集　【Desktop/crowdsource/core/customer/views.py】

import firebase_admin

from firebase_admin import credentials, auth

from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from django.urls import reverse
from core.customer import forms

from django.contrib import messages
from django.contrib.auth.forms import PasswordChangeForm
from django.contrib.auth import update_session_auth_hash
from django.conf import settings

cred = credentials.Certificate(settings.FIREBASE_ADMIN_CREDENTIAL)
firebase_admin.initialize_app(cred)

@login_required()
def home(request):
    return redirect(reverse('customer:profile'))

@login_required(login_url="/sign-in/?next=/customer/")
def profile_page(request):
    user_form = forms.BasicUserForm(instance=request.user)
    customer_form = forms.BasicCustomerForm(instance=request.user.customer)
    password_form = PasswordChangeForm(request.user)

    if request.method == "POST":
 
        if request.POST.get('action') == 'update_profile':
            user_form = forms.BasicUserForm(request.POST, instance=request.user)
            customer_form = forms.BasicCustomerForm(request.POST, request.FILES, instance=request.user.customer)

            if user_form.is_valid() and customer_form.is_valid():
                user_form.save()
                customer_form.save()

                messages.success(request, 'プロフィールが更新されました。')
                return redirect(reverse('customer:profile'))

        elif request.POST.get('action') == 'update_password':
            password_form = PasswordChangeForm(request.user, request.POST)
            if password_form.is_valid():
                user = password_form.save()
                update_session_auth_hash(request, user)

                messages.success(request, 'パスワードが更新されました。')
                return redirect(reverse('customer:profile'))

        elif request.POST.get('action') == 'update_phone':
            # Get Firebase user data
            firebase_user = auth.verify_id_token(request.POST.get('id_token'))

            request.user.customer.phone_number = firebase_user['phone_number']
            request.user.customer.save()
            messages.success(request, '電話番号が更新されました。')
            return redirect(reverse('customer:profile'))

    return render(request, 'customer/profile.html', {
        "user_form": user_form,
        "customer_form": customer_form,
        "password_form": password_form,
    })