firebase認証 — 開発者の頭痛を減らす

This is an article originally from Medium. I have decided to switch from Medium to dev.to and import all my posts from there.

だから私はいくつかをしなければならなかったauthentication with GitHub 先日、ミニプロジェクトを作りました.主な考えは、ログインシステム用のWebアプリで使用するために、OAuthとGitHubの認証サービスを使用することでした.

すべてはすばらしかったので、「ダニエル・バークでかろうじてコーディングしている」ことで発見された.ユーザを認証するJS.
本質的には、ユーザーが“ログインしてログイン”ボタンをクリックすると、私のWebアプリは、ユーザーをリダイレクトする[https://github.com/login/oauth/authorize](https://github.com/login/oauth/authorize) , どちらが私を送りますかCLIENT_ID 私のoauthアプリの.
ユーザーがページ内のgithub signにログインしたら、https://github.com/login/oauth/authorize ), その後、私のノードの私のエンドポイントの1つに私のGithub OAuthアプリの一時的なコードとクライアントの秘密を送信します.ユーザーがそこにリダイレクトされるので、JSサーバー.私は、それからAを送らなければなりませんでしたPOST リクエスト[https://github.com/login/oauth/access_token](https://github.com/login/oauth/access_token) 私とCLIENT_ID , CLIENT_SECRET とcode それが私のサイトにリダイレクトされたとき、我々は得ました.その後、私はAとの反応を得るaccess_token , これにより、Githubやユーザ名などのユーザのプロフィール画像などの情報を得ることができます.
ビデオからサーバー側のコードsource ):
< div >
私は上記のように、私はyoutubeの非常に直感的なチュートリアルを見つけました.アクセストークンを取得し、ユーザーを静的なHTMLページにリダイレクトしました.それから、JavaScriptのUIフレームワークとして、これを組み込む必要がありました.p >
あなたは、これが大したことではないと思うかもしれません、そして、私は簡単にノードでバックエンドを組み込むことができました.これでJS.ここでは、問題は、UIを提供し、通信access_token を返します.p >
第一に、ユーザが認証されるとUIにサービスを提供しなければなりませんでした.今、あなたが参照してください、反応はフロントエンドフレームワーク、または他の言葉であることを意味している、それはユーザーが見ることができるものを管理します.バックエンドはフロントエンドの背後にあるインフラストラクチャで、フロントエンド用のデータを管理しています.私たちのGithub OAuthアプリケーションとの通信のバックエンドのタスクは現在、フロントエンドのコードをする必要があります.p >
自然の中で反応する1つのHTMLファイル内の要素に追加されます.これはdiv とid of root または他の何か.ここでは非常にシンプルになりますが、反応は独自のJavaScriptとHTMLの「ハイブリッド」コードをJSXと呼びます.p >
< tt >サーバからHTMLファイルをロードするだけですが、HTMLファイルはどのように反応コードがロードされているかではありません.反応はノードを使用します.JSサーバ(バックエンドから別のもの)を使って反応コードを実行します.p >
物事をクリアするには、反応サーバーを実行することができますhttp://localhost:3000/ 一方、我々のバックエンドサーバーはhttp://localhost:5000/ <山田>p >
したがって、フロントエンドを持つためには、ノードを走らせる必要があります.あなたの反応コードがその1つのHTMLファイルにそれ自体を加えることができるようにJSサーバーp >
現在は2つの異なるノードがあります.JSサーバの実行(バックエンド用のものとフロントエンド用のもの)を使うと、2番目の問題になります.p >
私たちは2つのノードを実行しています.JSサーバは、それらの間のデータを通信することは非常に固く、非直感的です(私のような初心者プログラマにとって)、複数のAPIエンドポイントとおそらくクッキーを含みますp >
これは、かなり速くかなりかなり複雑になることができます.あなたは、どうにか、どうにか、バックエンドを反応フロントエンドに組み込むべきであると考えているかもしれません.これは不可能ではありませんが、単にプロジェクトで物事を成し遂げたいプログラマにとっては非常に複雑です.( This approach または非常に初心者プログラマーとだけで物事を自分のプロジェクトで行わを取得するコーダーのための複雑なことができます.あなたが進んでいるなら、本当に良いです、あるいは、あなたは非常に低いレベルでものを理解したいです);p >
これはFirebase認証が本当に輝くときです.p >
私がこのことを理解しようとしている壁に私の頭を叩いていたので、ベンジャミンSはCodeDay不条理サーバーで、CodeDay is a non-profit dedicated to introducing students to computer science ) Firebase認証について教えてくださいp >
< P >

Firebase認証?私は、このような私の個人的なプロジェクトで、Firebaseリアルタイムデータベースを聞いただけでしたchat website そしてmechanical keyboard sound test platform . これはショットの価値があります.p >
それは確かにショットの価値があった.With this lovely article Firebaseドキュメントで、FireBaseをプロジェクトにインストールしましたnpm install firebase ), FireBaseプロジェクトを設定し、認証をコーディングし始めました.(もしあなたが欲しいなら、その記事を使うことをお勧めしますin-depth 解説< p >
< P >

したがって、私のFirebaseプロジェクトのための設定がありました.基本的には、APIの資格情報を持ってFirebaseを設定しました.p >
のためのコードfirebase-config.js :

< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/ShubhamPatilsd/63eda4dbefa8a41bf2d46168feeed56d.js//>
< div >
< tt >認証についてp >
< p >コードauth.js <山田>
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/ShubhamPatilsd/d794fc8121727573879b4d1825defb43.js//>
< div >
現在、すべてが一緒に来るところ.App.js

< P >App.js (重要な部分を説明するコードの全てを読んでください)< p/p >
< p >関数と呼ばれますloginAsync ログインボタンのクリックを処理する設定br/>
<> P >
クラスをハイライト表示する

import githubLogin from './service/auth';

const loginAsync = async () =>{

const res = await githubLogin();

console.log(res);

}

< div >
それから、我々は実際のボタンを持っています.(マテリアルのUIを使っているので、Googleの材料設計を可能にします)< br/>
<> P >
クラスをハイライト表示する

<Button onClick={loginAsync} style={{

}}variant="contained" startIcon={<LockOpenIcon />}>Login With GitHub</Button>

< div >
私たちはonClick ハンドラは、コードをloginAsync 関数p >
そして、それはそれでした!それは完璧に働いた.私は、AuAuthでログインボタンをクリックするとユーザーをURLにリダイレクトしますCLIENT_ID これはログインすることができました.そして、このようにしてユーザをFirebase URLに送りましたmy-app-12345.firebaseapp.com/__/auth/handler OAuthコールバックハンドラ.それから、Firebaseは私のサイトにユーザをリダイレクトして、再びアクセストークンでデータを送りますp >
< p >それは私がどのようにそれが私が認証を理解しようとして狂っているのを防ぐのを驚くべきものでした.Firebaseに感謝しますp >
これが助けとなる望み!あなたはいつもこれに応答することができますし、いくつかのフィードバックを与える!(これも私の初めてのメディアでの書き込み)
< p > byShubham Patil on March 23, 2021 .

< P >Canonical link

からエクスポートMedium 2021年8月15日p >