Using FirebaseUI Auth, on the Web - FirecastsYouTube↗  IA↗(long shot)
Science & Technology  59.1K views 715 likes 17 dislikes   06 Feb 2017
Firebase 416K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
LAURENCE MORONEY: Firebase Auth is a secure authentication
Firebase Auth は
system that allows users to sign in and sign up
ユーザーがアプリに ログインとサインアップできるようにする
for your application.
安全な認証システムです
It also allows federated identity
Facebook や Twitter のような プロバイダを介して
through providers like Facebook, Twitter, and, of course, Google.
もちろん Google とも 認証連携できます
Now when doing this, your users will demand a rich user
認証の実行中にユーザーは快適な ユーザーエクスペリエンスを要求します
experience, and providing this, as well as solving identity problems, can be a lot of work.
認証の提供は ID 問題の解決と同じく 大変な作業になります
Luckily, Firebase UI makes all of this really easy.
幸運にも Firebase UI が そのすべてを非常に簡単にします
And in this video, I'll show you how to do a sign-in and sign-up with Google in a web app
Webアプリで Google に ログインとサインアップする方法と
as well as using an email-password combination.
Email とパスワードを 組み合わせて使用する方法を お見せします
Before we start, you'll need to create a Firebase project and then enable authentication on it.
始める前に Firebase プロジェクトを作成して 認証を使えるようにしましょう
The console will then provide you with code snippets
Console ではウェブページに入れる コードスニペットを提供していますので
to put in your web page. Let's take a look.
見てみましょう
Step one, create a new project in the Firebase console.
ステップ１ Firebase console 内に 新規プロジェクトを作成します
Step two, enable authentication.
ステップ２ 認証を有効にします
Click Get Started. Click Set Up Sign-in Method, enable Email Password, and enable Google.
［開始］をクリックして ［ログイン方法］をクリックして Email パスワードと Google を 有効にします
Step three, if you're going to run these pages on your own domain, be sure to add the domain name.
ステップ３ 自分のドメインで ページを実行するなら 必ずドメイン名を追加してください
Step four, go back to the Overview screen
ステップ４ Overview 画面へ戻り
and click Add Firebase to Your Web App.
［ ウェブアプリに Firebase を追加］を クリックします
Then you'll get the initialization code.
すると 初期化コードが出てきます
OK, now we've done everything we need on the Firebase back end.
これで Firebase に必要なものは揃いました
The next step is to build a site that presents sign-in options.
次はログインオプションを 示すサイトの作成です
This takes you to a page once you've signed in and displays information about the user on that page.
一度 ログインしたページに移動して そのページのユーザー情報を表示します
And that's it. It's just two web pages.
2枚のWebページで完了です
But wait, surely when signing in, you might need to build more pages,
でも待って ログインのときは もっとページが必要なのでは？
things like choosing between different accounts
機種によって違うアカウントを 選択するとか
on the machine, something like this.
こんな風にですね
Or, if you want to sign up a new user, then you probably need something like this.
新規ユーザー用のサインアップの場合 こんなページが要るとか
Well, the good news is Firebase Auth UI does all of that for you.
なんと Firebase Auth UI は そのすべてをやってくれます
Let's just build our pages. And we'll see it in action.
自分でページを作成して その動作を見てみましょう
Here's my first page.
これが私の最初のページです
It's just basic. It's near-empty HTML.
基本的なものだけで ほぼ空っぽのHTMLです
Remember that code from the Firebase console?
Firebase console の あのコードを覚えてる？
Well, I'll just paste that in.
それを貼り付けます
And then from GitHub, I can use the code for the sign-in widget.
ログインウィジェットには GitHub からのコードが使えます
You can find that code here.
ここにあるコードを
And I'll paste it here.
こっちに貼り付けます
Yes, that's GitHub because Firebase Auth UI is fully open source.
これぞ GitHub ですね Firebase Auth UI は 完全にオープンソースですからね
I need to configure it to tell it which page to redirect to after signing in,
そして ログインしたら リダイレクトするページや
and also which providers I'm using.
使用中のプロバイダーを 設定する必要があります
Earlier, if you remember, I turned on email and Google.
先ほど Email と Google を 有効にしました
So I'll do that here.
ここでそれを行います
And now the logged-in page.
今度はログイン後のページです
Again, it's pretty basic.
これも非常に基本的なものだけです
And I just paste in the same code.
同じコードを貼り付けます
Note this part.
この部分にご注目
It's a callback that happens when the auth state changes.
これは 認証状況が変わる場合の コールバックです
So we'll write a little info about the user to the page in that case.
その場合のユーザー情報を このページに少し書いておきます
And that's it.
これで完了です
That's all the coding we need to do.
必要なコードはこれだけです
So you now have a page with two sign-in buttons.
これで２つのログインボタンが ページの上にできました
There's a Sign In with Google button and a Sign In with Email button.
Google でログインするボタンと Email でログインするボタンです
Think about the different flows for a Sign In with Google button.
Google ボタンでログインする場合の 作業の流れを考えてみましょう
I might have no Google accounts on this machine, in which case
この機種にGoogle アカウントが ない場合は
I have to give the user the facility to create one.
ユーザーがそれを作成できる 便宜を図ったり
Or, there might be more than one account signed in in this browser, in which case
もしくはこののブラウザに 複数のログインアカウントがある場合
I have to give the user the ability to choose one of them.
ユーザーが１つを選べるようにも する必要があります
Or, of course, I might have a user already signed
Google にログイン済みの ユーザーがいる場合は
in with Google, in which case I should just sign them right in.
もちろん即時に ログインさせなくてはいけませんね
Let's see this in action.
その動作を見てみましょう
OK, I now have a browser with no Google account signed in.
これは Google アカウントのない ブラウザです
I click Sign In, and I get this.
［ログイン］をクリックすると こうなります
As I have Email Sign In as an option, it falls back to Email Sign In.
Email でのログインも選択できるので Eメールのログイン画面になります
But I really want to sign in with Google, so I need a Google account.
本当は Google でログインがしたいので Google アカウントが必要です
So if I select more options, I can do that.
オプションを選択すれば そうできます
And this is all without writing any code for it.
コードを全く書かなくても これができます
OK, here's the next scenario.
では 次の場合です
I have multiple accounts signed in on this browser.
このブラウザでは 複数のログインアカウントがあります
So when I try to sign in, it gives me an account chooser.
ログインしようとすると アカウントを選択する画面となります
That's pretty neat, right?
便利でしょ？
And then there's this simple scenario.
そして この場合はシンプルです
I have one account in this browser.
ブラウザのアカウントが１つの場合
So when I click Sign In, I should just sign straight in.
［ログイン］をクリックすると 即時にログインします
And I am.
これが私です
So lots of different user flows, but you're given the optimal standard user interface without needing to write any code.
ユーザーの流れは様々ですが コードを書かなくても 最適な標準のUI が与えられています
And that's what the open source Firebase Auth UI does for you.
これが みなさんに贈る Firebase Auth UI オープンソースです
So we just saw what happens when a user tries
はい ユーザーが Google で ログインしようとした場合
to sign in with Google.
どうなるかご紹介しました
But what if you want to keep your own user store
しかし 自分のユーザーストアを保持して
and not federate to an identity provider like ours?
当社のようなIDプロバイダーと 連携認証したくない場合は？
Well, no problem.
問題ありません
The Email Sign In gives you just that.
Email でログインすればよいのです
If you try to sign in with email, what Firebase will do
Email でログインする場合 Firebase は
is list the Google accounts based
ブラウザにログインしたことのある Email アドレスを基にして
on their email address that are signed into this browser
Google アカウントをリストにします
already. But if you don't own one of them,
でも それもなくて 自分だけのもので使いたい場合でも
and you just want to use your own, you can sign in with that,
その方法でログイン可能です
too. But, of course, you might need a sign-up page
でも Email の IDで あなたのサイトにログインするための
so that someone can create an email identity to sign into your site with.
サインアップのページが 必要な場合もあります
And that's also provided for you.
それもあなたに提供されています
Google SmartLock will even save it for you if you want.
ご希望なら Google SmartLock が それを保存します
Let's see that in action.
その動作を見てみましょう
I'm now back on my home page.
私のホームページに戻ってきました
And I'll select Sign In with Email.
［Email でのログイン］を選択します
Here are two email addresses that I signed in with previously.
以前にログインしたことのある Email アドレスが２つあります
If I pick one of them, I'll get either the Google
１つを選ぶと
Sign In password entry-- if it's a Google ID--
Google ID の場合は Google ログインパスワードで入り
or the email password one if it's an identity I set up on this page.
このページに設定した ID なら Email パスワードで入ります
I enter the password, and I'm logged in.
パスワードを入力して ログインします
Signing up a new account is easy.
新規アカウントの作成は簡単です
You just click the Add Account button, enter the details--
［アカウントの作成］をクリックして
username and password-- and the account will be created.
ユーザーネームとパスワードを入力するだけで アカウントが作成できます
One subtle but powerful part of this
この巧妙ですごいところは
is that Firebase Auth UI also detects and prompts
Firebase Auth UI はユーザーが 以前に使用したログイン方法を
your users to use the sign-in method that they previously
見つけ出して案内してくれることです
had used. So, for example, if they had signed in with Google
例えば Google に ログインしたことがあるユーザーは
previously, they would be taken directly there
再び そこから直接 入れます
to do so again, saving them time and effort
これで時間と労力を節約できますし
and saving you a lot of code.
開発者もコードを書かなくて済みます
And that's it-- great UX for signing in and signing up,
以上です　ログインとサインアップの 優れたユーザー体験です
very little coding for you.
コードも最小限で済みました
I hope you enjoyed this screencast
いかがでしたか？
on how to do Firebase Auth UI on the web.
ウェブで Firebase Auth UI を 使う方法でした
As always, leave me questions in the comments below,
質問は いつもどおりに 下のコメント欄にどうぞ
and don't forget to hit that Subscribe button. [MUSIC PLAYING]
チャンネル登録もお忘れなく
Similar videos:

Build a Dynamic Web App Using Firebase Hosting - Firecasts
Firebase
52.8K views 493 likes 18 dislikes 29 Mar 201773% match

New Options for Targeting Firebase Notifications - Firecasts
Firebase
33.9K views 163 likes 3 dislikes 04 Apr 201743% match

Learn About Phone Auth in Firebase! - Firecasts
Firebase
26.3K views 225 likes 7 dislikes 30 May 201738% match

Getting started with Firebase Auth on the Web - Firecasts
Firebase
368.2K views 6.3K likes 118 dislikes 26 Jul 201632% match

Firebase Auth UI, on Android - Firecasts
Firebase
43.4K views 374 likes 8 dislikes 21 Feb 201732% match

Verify your email users - Firecasts
Firebase
30.6K views 313 likes 13 dislikes 02 May 201732% match

Getting Started with Firebase Notifications on Android - Firecasts
Firebase
36.4K views 270 likes 16 dislikes 18 May 201627% match

Getting Started with Firebase Cloud Messaging on the Web - Firecasts
Firebase
312.5K views 1.9K likes 128 dislikes 17 Oct 201626% match

Introducing Firebase App Indexing
Firebase
158.9K views 352 likes 16 dislikes 18 May 201626% match

Getting Started with Firebase Hosting on the Web - Firecasts
Firebase
133.5K views 771 likes 38 dislikes 12 Jul 201625% match

Introducing Firebase Notifications
Firebase
93.5K views 115 likes 11 dislikes 18 May 201625% match

Getting Started with Firebase Storage on the Web - Firecasts
Firebase
125.6K views 1.2K likes 21 dislikes 07 Jul 201625% match

Getting Started with Firebase Auth on Android - Firecasts
Firebase
91.8K views 509 likes 45 dislikes 20 May 201624% match

Introducing Firebase Authentication
Firebase
689.7K views 1K likes 28 dislikes 18 May 201623% match

Getting Started with the Firebase Realtime Database on the Web, Part 2 - Firecasts
Firebase
164.8K views 1.2K likes 19 dislikes 09 Aug 201623% match

The beginner's guide to AngularJS and Firebase on the Web - Firecasts
Firebase
62.3K views 659 likes 25 dislikes 11 Aug 201623% match

Getting Started with the Firebase Realtime Database on the Web, Part 1 - Firecasts
Firebase
369.8K views 3.1K likes 74 dislikes 02 Aug 201623% match

Introducing Firebase Predictions
Firebase
53.6K views 287 likes 7 dislikes 31 Oct 201723% match

Getting Started with Firebase for Unity - Firecasts
Firebase
121.7K views 703 likes 36 dislikes 02 Mar 201723% match

Angular 2 and Progressive Web Apps - Google I/O 2016
Firebase
64.1K views 589 likes 19 dislikes 18 May 201623% match

[NEWER VERSION AVAILABLE] Getting Started with Firebase on iOS - Firecasts
Firebase
139.3K views 451 likes 19 dislikes 03 Jun 201622% match

Introducing Firebase Cloud Messaging
Firebase
699.5K views 727 likes 26 dislikes 18 May 201622% match

Zero to App: Develop with Firebase - Google I/O 2016
Firebase
189.5K views 2K likes 58 dislikes 20 May 201622% match

[Deprecated] Getting Started with Firebase Analytics on iOS: Events - Firecasts
Firebase
52.3K views 289 likes 5 dislikes 26 Sep 201621% match

[OUTDATED] Getting Started with Firebase on Android - Firecasts
Firebase
573.9K views 1.6K likes 85 dislikes 09 Jun 201621% match

[DEPRECATED] Getting Started with Cloud Functions for Firebase - Firecasts
Firebase
114.1K views 1.2K likes 40 dislikes 11 Apr 201721% match

Getting Started With Cloud Firestore on the Web - Firecasts
Firebase
183.9K views 1.6K likes 36 dislikes 03 Oct 201720% match

Angular 2 - Google I/O 2016
Firebase
54.4K views 578 likes 9 dislikes 25 May 201620% match

Introducing Firebase Crashlytics
Firebase
73.7K views 223 likes 14 dislikes 31 Oct 201720% match

Getting Started with React and Firebase - Firecasts
Firebase
95.6K views 1.2K likes 41 dislikes 16 Aug 201620% match


Settings Privacy About Contact Donate