FirebaseUI로 일본어화 한 후 AuthDomain을 설정하고 싶습니다.

16979 단어 FirebaseFirebaseAuth
어떤 용으로 Firebase Authentication을 사용하고 있었고 FirebaseUI를 로그인 화면에 구현했습니다.

FirebaseUI에서 웹 앱에 쉽게 로그인 기능 추가

위의 링크를 보시면 알 수 있듯이 FirebaseUI에서는 아래 그림과 같이 단순히 컨테이너를 만들면 마음대로 로그인 화면을 만들어 줍니다.


결국 여기까지 도착하기까지 여러가지 망설였기 때문에 비망록적인 것입니다.

안 1



첫째, Google 가이드에는 몇 가지 방법이 있습니다.
ESM (ES Modules)에서 Webpack을 사용하여 1 파일로 그룹화했으므로 가이드대로 npm install firebaseui --save를 실행하여 프로젝트에 통합했습니다.

이 때 사용한 코드는 도중에 생략하지만 다음과 같습니다.

login.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <script src="./bundle.js"></script>
    <link
      type="text/css"
      rel="stylesheet"
      href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css"
    />
  </head>
  <body>
    <div id="firebaseui-auth-container"></div>
  </body>
</html>

login.ts
//----- ログイン処理 -----//
import * as firebaseui from 'firebaseui'
import { firebaseConfig } from './firebaseConfig'
import firebase from 'firebase/app'
import 'firebase/auth'

// Firebaseを初期化
firebase.initializeApp(firebaseConfig)

const auth = firebase.auth()
auth.languageCode = 'ja'
if (location.pathname === '/login') {
  const ui = new firebaseui.auth.AuthUI(firebase.auth())
  ui.start('#firebaseui-auth-container', {
    signInOptions: [
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    ],
    callbacks: {
      signInSuccessWithAuthResult: () => {
        return true
      },
    },
    signInSuccessUrl: '/',
    privacyPolicyUrl: '/policy',
  })
}

이것을 열어 보면 다음과 같은 표시가 되었습니다.



일본어가 아니다 ....

안 2



"그래도 역시 유저를 생각하면 일본어가 좋구나..."라는 것으로 또 다른 방법 "CDN 사용"을 시도하기 위해 방금 전의 TypeScript 파일을 지워 HTML 파일을 변경. <head> 태그가 끝나기 전에 이것을 추가했습니다.

login.html
<script src="/__/firebase/7.23.0/firebase-app.js"></script>
<script src="/__/firebase/7.23.0/firebase-analytics.js"></script>
<script src="/__/firebase/7.23.0/firebase-auth.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/4.7.1/firebase-ui-auth__ja.js"></script>
<script>
  const ui = new firebaseui.auth.AuthUI(firebase.auth())
  ui.start('#firebaseui-auth-container', {
    signInOptions: [
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    ],
    callbacks: {
      signInSuccessWithAuthResult: () => {
        return true
      },
    },
    signInSuccessUrl: '/',
    privacyPolicyUrl: '/policy',
  })
</script>



일본어가 되었습니다!

그러나 여기서도 문제가.
예를 들어 지금 hogehoge.com 에 있더라도 로그인 버튼을 누르면 <project-id>.firebaseapp.com 로 건너뛰고 나서 OAuth 화면으로 날아갑니다.
즉, OAuth의 흐름으로서는 「 hogehoge.com → <project-id>.firebaseapp.com → (OAuth 인증) → <project-id>.firebaseapp.com → hogehoge.com 」라고 수수께끼(?)의 firebaseapp.com
이것에 대해서는, Firebase 의 설정의 authDomain 라고 하는 Key 로 설정할 수 있습니다만 , 원래 CDN 에서는 설정 파일을 임베드할 수 없다.

해결책



문서를 살펴보면 FirebaseUI 소스 코드에서 직접 빌드하면 해결할 수 있습니까? 라고 생각해, 시험해 보았습니다. 결과 성공했습니다.

GitHub: firebase/firebaseui-web

참고 : firebaseui-web/README.md at master · firebase/firebaseui-web

Step1



먼저 빌드에 필요한 개발 환경을 설치합니다.
  • Node.js
  • npm
  • Java SE Runtime Environment 8

    • Step2



    소스 코드를 Clone 합니다.
    git clone https://github.com/firebase/firebaseui-web.git
cd firebaseui-web
npm install

    Step3



    ESM용 일본어 버전 파일을 빌드합니다.
    npm run build build-esm-ja
    dist 폴더에 있는 esm__ja.js가 출력된 파일입니다.

    Step4



    로드합니다. TypeScript를 사용하고 있기 때문에 index.d.ts도 복사했습니다.

    login.ts
    import './firebaseui/@types/index'
import { auth } from './firebaseui/esm__ja'

// ～ Firebaseの設定は略 ～ //

window.addEventListener('DOMContentLoaded', () => {
  if (location.pathname === '/login') {
    const ui = new auth.AuthUI(firebase.auth())
    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID,
      ],
      callbacks: {
        signInSuccessWithAuthResult: () => {
          return true
        },
        signInFailure: (err) => {
          console.error(err)
        },
        uiShown: () => {},
      },
      signInSuccessUrl: '/',
      privacyPolicyUrl: '/policy',
    })
  }
})

    Step5



    Step4 그대로, 아직 <projectid>.firebaseapp.com로 날아갑니다.
    그런 다음 Firebase 구성 파일을 변경합니다.

    firebaseConfig.ts
    {
  apiKey: '...',
  // authDomain: '<projectid>.firebaseapp.com',
  authDomain: 'hogehoge.com',
  databaseURL: '...',
  // 以下略
}

    이제 Webpack으로 빌드하면 제대로 일본어가 되어 hogehoge.com로 날아갔습니다!
    JavaScript에서 Firebase(Firestore 데이터베이스)의 예
    【JAMstack】Next.js × Firebase로 JAMstack인 블로그 사이트를 만드는 ①[개요]

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage