소개

이쪽은 Web 초보자가 firebase로 PWA 입문해 본다 의 제2회가 됩니다.
전회의 졸린 기사를 좋아해 주신 분 감사합니다 ··!

오늘은 전회 작성한 なまいきなねこ 와 Google씨를 연결해 보고 싶습니다.

단적으로 말하면 로그인 기능을 구현하고 고양이에게 말을 가르칠 때 이용하고 싶습니다.

아티팩트는 여기입니다.
htps : // 기주 b. 코 m / 타마 gn / Chie ky 또는 t / t Ree / Da y2

Authorization 기능 구현

먼저 프로젝트에 Auth.js를 추가합니다.

auth.js

var auth_button = document.getElementById('auth-button');
var logout_button = document.getElementById('logout-button');

firebase.auth().onAuthStateChanged(function(user) {

  if (user) {
     // ログアウトボタンを出す
     logout_button.style.display = "";
     auth_button.style.display = "none";
  } else {
    logout_button.style.display = "none";
    auth_button.style.display = "";
  }
});

function Auth()
{
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithRedirect(provider);
}

function Logout()
{
  firebase.auth().signOut().then(function() {
    console.log("ログアウトしました");
    location.reload();
  }).catch(function(error) {
    console.log("ログアウトエラー");
});
}

Authorization도 로그아웃도 (거의) 일행으로 쓸 수 있으므로 멋지네요.

이번에는 Google 계정으로 로그인을 구현했습니다.

index.html도 다시 작성합니다.

index.html

<!-- ログインボタン -->
<div id="button-container">
    <a href="#" id="auth-button" class="square_btn_blue" onclick="Auth()">ねこをGoogleに繋ぐ</a>
    <a href="#" id="logout-button"  class="square_btn_red" onclick="Logout()">ねこをGoogleから離す</a>
</div>

로그인/로그아웃 버튼 요소를 각각 취득해, firebase.auth().onAuthStateChanged 의 콜백으로 표시/숨기기를 제어합니다.

빠는거야 1

이전에 작성한 html에서 Firebase SDK를 호출하지만 script 태그 설정이 defer이므로 새로 추가 한 auth.js가 먼저로드되어 firebase가 undifined로 화를 냈습니다.

이번은 속도는 요구하고 있지 않기 때문에, 우선 defer 를 제외했습니다.

하마 리커버스 2 (미해결)

로그인 후 Redirect 후에 firebase.auth().onAuthStateChange()가 호출될 때까지 두 개의 버튼이 표시됩니다.



미리 버튼의 태그에 style="display: none"을 설정하면, 콜백으로 왠지 덮어쓰지 않는다··.

모습이 나쁘기 때문에 일찍 수정하고 싶습니다.

추가
분명히 style = "compact"를 지정하면 잘 작동하지 않는 것 같습니다.
style.display = "" 를 지정하여 덮어 쓰면 잘 사라졌습니다!

요약

이번에는 Google 계정으로 로그인/로그아웃을 구현해 보았습니다.

흠집 2가 해결되지 않으므로 나중에 수정하고 추가할 예정입니다. 추가했습니다.

다음 번에는 인증을 한 후에 얻을 수 있는 토큰을 이용하여 사용자 계정을 만들고 firebase의 Realtime Detabase에 추가하고 싶습니다.