EC-CUBEでFirebase(Google)認証してみた。

こんにちは。はるです。
GWも明けて、5月中旬は疲れが疲れがどっと出てくる時期なのではないでしょうか？
祝日が7月とまだまだ先ですが頑張っていきましょう！

今回、会社の研修中にEC-CUBEでFirebaseのAutenticationを使って認証をしてみようという内容があって自分なりにまとめてみました。

EC-CUBEの環境構築については以前の記事を参考にしていただければいいかなと思っています。
今回、FIrebaseのプロジェクト作成なども割愛させていただきます。
調べていただければ出るかと思います。

※あと、管理画面より登録の際にメール認証をOFFにだけしといてください。

それでは早速、本題に入っていきます。

Firebase SDKの取得

Firebaseとやりとりする時にはこちらが必須になります。
(AuthenticationのGoogleの有効化を忘れないでください。)
歯車アイコン + プロジェクト設定で見ることができます。

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

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

<script>
 // Your web app's Firebase configuration
 var firebaseConfig = {
   apiKey: "",
   authDomain: "",
   projectId: "",
   storageBucket: "",
   messagingSenderId: "",
   appId: ""
 };
 // Initialize Firebase
 firebase.initializeApp(firebaseConfig);
</script>

今回は、生のJavascriptを使用して認証を行っていくので上記をコピーしておいてください。

各twigファイルに処理を追加していく

新規会員登録、ログイン、ログアウト、退会について処理を加えていきます。

まず、管理ページを開きます。（http://myIP/ec/login）
コンテンツ管理 → ページ管理 で編集を行っていきます。

会員登録(入力ページ)　をクリックします。
下記を一番下に追記してください。

{% block main %}
   <div id="firebaseui-auth-container"></div>
   ・
   ・
{% endblock %}

{% block javascript %}
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
   <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
   <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
   <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
   <script src="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth__ja.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
     // Your web app's Firebase configuration
     var firebaseConfig = {
       apiKey: "",
       authDomain: "",
       projectId: "",
       storageBucket: "",
       messagingSenderId: "",
       appId: ""
     };
     // Initialize Firebase
     firebase.initializeApp(firebaseConfig);
    </script>
    
    var uiConfig = {
   // signInSuccessUrl: `/callback`,
       callbacks: {
           signInSuccessWithAuthResult : async (authResult,callbackUrl)=>{
               var user = authResult.user;
               var googleUser = authResult.additionalUserInfo;
               var google_email = googleUser.profile.email;
               var google_first = googleUser.profile.family_name;
               var google_last = googleUser.profile.given_name;
               
               document.getElementById('entry_name_name01').value = `${google_first}`;
               document.getElementById('entry_name_name02').value = `${google_last}`;
               document.getElementById('entry_email_first').value = `${google_email}`;
               document.getElementById('entry_email_second').value = `${google_email}`;
               
               return false;
           },
       },
   
   signInOptions: [
       firebase.auth.GoogleAuthProvider.PROVIDER_ID,
   ],
   // tosUrl: 'agreement',
   // privacyPolicyUrl: function() {
   //     window.location.assign('privacy-policy');
   // }
   };
   var ui = new firebaseui.auth.AuthUI(firebase.auth());
   ui.start('#firebaseui-auth-container', uiConfig);
   </script>
{% endblock javascript %}

少し説明していきます。

CDN書き忘れないでください。
signInSuccessWithAuthResultでGoogle認証後の処理を書いていきます。
引数の中にある、authResultに認証情報が入っています。

最終的にJSを使って必要な情報を抜き取り、会員ページに埋め込んでいます。

この方法でいいのかわかりませんが私は、こちらを使っております。

「登録」ボタンを押しましょう。

会員登録ページでは、このような画面が表示されるかと思います。

同様にログイン、ログアウト、退会にも処理を加えていきます。

// Myページ / ログイン

var uiConfig = {
// signInSuccessUrl: `/callback`,
   callbacks: {
       signInSuccessWithAuthResult : async (authResult,callbackUrl)=>{
           var user = authResult.user;
           var googleUser = authResult.additionalUserInfo;
           var google_email = googleUser.profile.email;
           console.log(googleUser)
           document.getElementById('login_email').value = `${google_email}`;
           
           return false;
       },
   },

signInOptions: [
   firebase.auth.GoogleAuthProvider.PROVIDER_ID,
],

ログインは、メールアドレスしか情報がないので上記の記述になります。
（新規会員で記述したものをコピーしてください。）

// ブロック管理 → ログインナビ（共通）

// 中身は消して、id付与
<a id="atag">
   <i class="ec-headerNav__itemIcon fas fa-lock fa-fw"></i>
   <span class="ec-headerNav__itemLink">{{ 'ログアウト'|trans }}</span>
</a>

-----------------------------------------------------------------------------------------------------

let abc = document.getElementById('atag')
if(abc){
   abc.addEventListener('click', function() {
       firebase.auth().onAuthStateChanged((user)=> {
           if(user){
               firebase.auth().signOut()
           }
           // デベロッパーツールから遷移先のURLをコピー
           window.location.href="http://・・・/logout"
       })
   })
}

onAuthStateChangedで現在ログインしているユーザを取得します。
if文でFIrebaseユーザか判定して、FirebaseユーザならsignOut()しています。
あと、if文でaタグの監視をしていないとデベロッパーのコンソールにエラーが出るので入れております。

// MYページ/退会手続き(完了ページ)

window.onload = () => {
   firebase.auth().onAuthStateChanged((user)=> {
       console.log(user)
       if(user){
           user.delete()
           alert('ユーザを削除しました。')
       }
   })
}

退会ボタンを押下後、読み込みが完了したらFIrebase ユーザを削除するように実装しております。

まだ、PHP側を実装していなかったのでそちらを実装しましたら再度上げたいと思います。

自分で書いていて思ったのですが、だいぶ読みづらい記事になったかと思われます。
大事なところが抜けているかもしれませんが、よろしくお願いします。

もし、こうした方がいいよ！などの意見があったりここ違うなどあればコメントをお願いします。