Added invisible captcha phone sing in and simplified popup flow phone…

… sign-in Change-Id: If95ff0053095ff765e0f6654edeea9a18fac3ef3
firebase · May 18, 2017 · abf9f31 · abf9f31
1 parent b404aa3
commit abf9f31
Show file tree

Hide file tree

Showing 7 changed files with 665 additions and 27 deletions.
diff --git a/auth/README.md b/auth/README.md
@@ -4,7 +4,7 @@ Firebase Auth Quickstarts
 The Firebase auth quickstart demonstrates several methods for signing in:
 
  - The [Firebase email/password quickstart](email.html) demonstrates using a Firebase stored email & password - you can both create and sign in a user.
- - The [Firebase phone number authentication quickstart](phone.html) demonstrates using a Firebase phone number authentication.
+ - The Firebase phone number authentication quickstart demonstrates using Firebase phone number authentication using three different techniques: with a [visible ReCaptcha](phone.html), an [invisible ReCaptcha](phone-invisible.html) and a [simplified popup flow](phone-simple.html) (not recommended for production apps).
  - The Firebase Google Sign in quickstarts demonstrate using a Google account to authenticate to Firebase using three different techniques: with a [popup](google-popup.html), a [redirect](google-redirect.html) and an [auth token](google-credentials.html).
  - The Firebase Facebook Login quickstarts demonstrate using a Facebook account to authenticate to Firebase using three different techniques: with a [popup](facebook-popup.html), a [redirect](facebook-redirect.html) and an [auth token](facebook-credentials.html).
  - The Firebase GitHub Login quickstarts demonstrate using a GitHub account to authenticate to Firebase using two different techniques: with a [popup](github-popup.html) and a [redirect](github-redirect.html).

diff --git a/auth/index.html b/auth/index.html
@@ -58,8 +58,11 @@ <h2 class="mdl-card__title-text">Table of Content</h2>
           <ul>
             <li><a href="anon.html">Anonymous</a></li>
             <li><a href="email.html">Email/Password</a></li>
-            <li><a href="customauth.html">Custom Authentication</a> and an Example <a href="exampletokengenerator/auth.html">Custom Token Generator</a></li>
-            <li><a href="phone.html">Phone number sign-in</a><br><br></li>
+            <li><a href="customauth.html">Custom Authentication</a> and an Example <a href="exampletokengenerator/auth.html">Custom Token Generator</a><br><br></li>
+
+            <li><a href="phone-visible.html">Phone number sign-in with visible ReCaptcha</a></li>
+            <li><a href="phone-invisible.html">Phone number sign-in with invisible ReCaptcha</a></li>
+            <li><a href="phone-simple.html">Phone number sign-in with simplified popup flow (not recommended for production apps)</a><br><br></li>
 
             <li><a href="google-popup.html">Google sign-in using Popup</a></li>
             <li><a href="google-redirect.html">Google sign-in using Redirect</a></li>

diff --git a/auth/main.css b/auth/main.css
@@ -16,6 +16,7 @@
 
 html, body {
   font-family: 'Roboto', 'Helvetica', sans-serif;
+  background-color: #f5f5f5;
 }
 a {
   text-decoration: none;
@@ -24,6 +25,12 @@ li a {
   text-decoration: underline;
   color: #0288d1;
 }
+.mdl-card {
+  overflow: visible;
+}
+.grecaptcha-logo {
+  background-color: white;
+}
 .mdl-grid {
   max-width: 1024px;
   margin: auto;
@@ -57,13 +64,14 @@ h3 {
 }
 #recaptcha-container {
   margin-top: 10px;
-}
-#sign-in-button {
-  margin-top: 20px;
+  margin-bottom: 20px;
 }
 #verify-code-button, #cancel-verify-code-button {
   margin-left: 20px;
 }
 #sign-out-button {
   display: none;
 }
+#sign-in-card {
+  z-index: 2;
+}
diff --git a/auth/phone-invisible.html b/auth/phone-invisible.html
@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2016 Google Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<html>
+<head>
+  <meta charset=utf-8 />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Phone Authentication with invisible ReCaptcha</title>
+
+  <!-- Material Design Theming -->
+  <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
+
+  <link rel="stylesheet" href="main.css">
+</head>
+<body>
+<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
+
+  <!-- Header section containing title -->
+  <header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
+    <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
+      <div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
+        <a href="/"><h3>Firebase Authentication</h3></a>
+      </div>
+    </div>
+  </header>
+
+  <main class="mdl-layout__content mdl-color--grey-100">
+    <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
+
+      <!-- Container for the demo -->
+      <div id="sign-in-card" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
+        <div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
+          <h2 class="mdl-card__title-text">Phone number authentication with invisible ReCaptcha</h2>
+        </div>
+        <div class="mdl-card__supporting-text mdl-color-text--grey-600">
+          <p>Sign in with your phone number below.</p>
+
+          <form id="sign-in-form" action="#">
+            <!-- Input to enter the phone number -->
+            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+              <input class="mdl-textfield__input" type="text" pattern="\+[0-9\s\-\(\)]+" id="phone-number">
+              <label class="mdl-textfield__label" for="phone-number">Enter your phone number...</label>
+              <span class="mdl-textfield__error">Input is not an international phone number!</span>
+            </div>
+
+            <!-- Sign-in button -->
+            <button disabled class="mdl-button mdl-js-button mdl-button--raised" id="sign-in-button">Sign-in</button>
+          </form>
+
+          <!-- Button that handles sign-out -->
+          <button class="mdl-button mdl-js-button mdl-button--raised" id="sign-out-button">Sign-out</button>
+
+          <form id="verification-code-form" action="#">
+            <!-- Input to enter the verification code -->
+            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+              <input class="mdl-textfield__input" type="text" id="verification-code">
+              <label class="mdl-textfield__label" for="verification-code">Enter the verification code...</label>
+            </div>
+
+            <!-- Button that triggers code verification -->
+            <input type="submit" class="mdl-button mdl-js-button mdl-button--raised" id="verify-code-button" value="Verify Code"/>
+            <!-- Button to cancel code verification -->
+            <button class="mdl-button mdl-js-button mdl-button--raised" id="cancel-verify-code-button">Cancel</button>
+          </form>
+        </div>
+      </div>
+
+      <!-- Container for the sign in status and user info -->
+      <div  id="user-details-card" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
+        <div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
+          <h2 class="mdl-card__title-text">User sign-in status</h2>
+        </div>
+        <div class="mdl-card__supporting-text mdl-color-text--grey-600">
+          <!-- Container where we'll display the user details -->
+          <div class="user-details-container">
+            Firebase sign-in status: <span id="sign-in-status">Unknown</span>
+            <div>Firebase auth <code>currentUser</code> object value:</div>
+            <pre><code id="account-details">null</code></pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+
+<!-- Import and configure the Firebase SDK -->
+<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
+<!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
+<script src="/__/firebase/4.0.0/firebase-app.js"></script>
+<script src="/__/firebase/4.0.0/firebase-auth.js"></script>
+<script src="/__/firebase/init.js"></script>
+
+<script type="text/javascript">
+
+  /**
+   * Set up UI event listeners and registering Firebase auth listeners.
+   */
+  window.onload = function() {
+    // Listening for auth state changes.
+    firebase.auth().onAuthStateChanged(function(user) {
+      if (user) {
+        // User is signed in.
+        var uid = user.uid;
+        var email = user.email;
+        var photoURL = user.photoURL;
+        var phoneNumber = user.phoneNumber;
+        var isAnonymous = user.isAnonymous;
+        var displayName = user.displayName;
+        var providerData = user.providerData;
+        var emailVerified = user.emailVerified;
+      }
+      updateSignInButtonUI();
+      updateSignInFormUI();
+      updateSignOutButtonUI();
+      updateSignedInUserStatusUI();
+      updateVerificationCodeFormUI();
+    });
+
+    // Event bindings.
+    document.getElementById('sign-out-button').addEventListener('click', onSignOutClick);
+    document.getElementById('phone-number').addEventListener('keyup', updateSignInButtonUI);
+    document.getElementById('phone-number').addEventListener('change', updateSignInButtonUI);
+    document.getElementById('verification-code').addEventListener('keyup', updateVerifyCodeButtonUI);
+    document.getElementById('verification-code').addEventListener('change', updateVerifyCodeButtonUI);
+    document.getElementById('verification-code-form').addEventListener('submit', onVerifyCodeSubmit);
+    document.getElementById('cancel-verify-code-button').addEventListener('click', cancelVerification);
+
+    // [START appVerifier]
+    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
+      'size': 'invisible',
+      'callback': function(response) {
+        // reCAPTCHA solved, allow signInWithPhoneNumber.
+        onSignInSubmit();
+      }
+    });
+    // [END appVerifier]
+
+    recaptchaVerifier.render().then(function(widgetId) {
+      window.recaptchaWidgetId = widgetId;
+      updateSignInButtonUI();
+    });
+  };
+
+  /**
+   * Function called when clicking the Login/Logout button.
+   */
+  function onSignInSubmit() {
+    if (isPhoneNumberValid()) {
+      window.signingIn = true;
+      updateSignInButtonUI();
+      var phoneNumber = getPhoneNumberFromUserInput();
+      var appVerifier = window.recaptchaVerifier;
+      firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
+          .then(function (confirmationResult) {
+            // SMS sent. Prompt user to type the code from the message, then sign the
+            // user in with confirmationResult.confirm(code).
+            window.confirmationResult = confirmationResult;
+            window.signingIn = false;
+            updateSignInButtonUI();
+            updateVerificationCodeFormUI();
+            updateVerifyCodeButtonUI();
+            updateSignInFormUI();
+          }).catch(function (error) {
+            // Error; SMS not sent
+            console.error('Error during signInWithPhoneNumber', error);
+            window.alert('Error during signInWithPhoneNumber:\n\n'
+                + error.code + '\n\n' + error.message);
+            window.signingIn = false;
+            updateSignInFormUI();
+            updateSignInButtonUI();
+          });
+    }
+  }
+
+  /**
+   * Function called when clicking the "Verify Code" button.
+   */
+  function onVerifyCodeSubmit(e) {
+    e.preventDefault();
+    if (!!getCodeFromUserInput()) {
+      window.verifyingCode = true;
+      updateVerifyCodeButtonUI();
+      var code = getCodeFromUserInput();
+      confirmationResult.confirm(code).then(function (result) {
+        // User signed in successfully.
+        var user = result.user;
+        window.verifyingCode = false;
+        window.confirmationResult = null;
+        updateVerificationCodeFormUI();
+      }).catch(function (error) {
+        // User couldn't sign in (bad verification code?)
+        console.error('Error while checking the verification code', error);
+        window.alert('Error while checking the verification code:\n\n'
+            + error.code + '\n\n' + error.message);
+        window.verifyingCode = false;
+        updateSignInButtonUI();
+        updateVerifyCodeButtonUI();
+      });
+    }
+  }
+
+  /**
+   * Cancels the verification code input.
+   */
+  function cancelVerification(e) {
+    e.preventDefault();
+    window.confirmationResult = null;
+    updateVerificationCodeFormUI();
+    updateSignInFormUI();
+  }
+
+  /**
+   * Signs out the user when the sign-out button is clicked.
+   */
+  function onSignOutClick() {
+    firebase.auth().signOut();
+  }
+
+  /**
+   * Reads the verification code from the user input.
+   */
+  function getCodeFromUserInput() {
+    return document.getElementById('verification-code').value;
+  }
+
+  /**
+   * Reads the phone number from the user input.
+   */
+  function getPhoneNumberFromUserInput() {
+    return document.getElementById('phone-number').value;
+  }
+
+  /**
+   * Returns true if the phone number is valid.
+   */
+  function isPhoneNumberValid() {
+    var pattern = /^\+[0-9\s\-\(\)]+$/;
+    var phoneNumber = getPhoneNumberFromUserInput();
+    return phoneNumber.search(pattern) !== -1;
+  }
+
+  /**
+   * Re-initializes the ReCaptacha widget.
+   */
+  function resetReCaptcha() {
+    if (typeof grecaptcha !== 'undefined'
+        && typeof window.recaptchaWidgetId !== 'undefined') {
+      grecaptcha.reset(window.recaptchaWidgetId);
+    }
+  }
+
+  /**
+   * Updates the Sign-in button state depending on ReCAptcha and form values state.
+   */
+  function updateSignInButtonUI() {
+    document.getElementById('sign-in-button').disabled =
+        !isPhoneNumberValid()
+        || !!window.signingIn;
+  }
+
+  /**
+   * Updates the Verify-code button state depending on form values state.
+   */
+  function updateVerifyCodeButtonUI() {
+    document.getElementById('verify-code-button').disabled =
+        !!window.verifyingCode
+        || !getCodeFromUserInput();
+  }
+
+  /**
+   * Updates the state of the Sign-in form.
+   */
+  function updateSignInFormUI() {
+    if (firebase.auth().currentUser || window.confirmationResult) {
+      document.getElementById('sign-in-form').style.display = 'none';
+    } else {
+      resetReCaptcha();
+      document.getElementById('sign-in-form').style.display = 'block';
+    }
+  }
+
+  /**
+   * Updates the state of the Verify code form.
+   */
+  function updateVerificationCodeFormUI() {
+    if (!firebase.auth().currentUser && window.confirmationResult) {
+      document.getElementById('verification-code-form').style.display = 'block';
+    } else {
+      document.getElementById('verification-code-form').style.display = 'none';
+    }
+  }
+
+  /**
+   * Updates the state of the Sign out button.
+   */
+  function updateSignOutButtonUI() {
+    if (firebase.auth().currentUser) {
+      document.getElementById('sign-out-button').style.display = 'block';
+    } else {
+      document.getElementById('sign-out-button').style.display = 'none';
+    }
+  }
+
+  /**
+   * Updates the Signed in user status panel.
+   */
+  function updateSignedInUserStatusUI() {
+    var user = firebase.auth().currentUser;
+    if (user) {
+      document.getElementById('sign-in-status').textContent = 'Signed in';
+      document.getElementById('account-details').textContent = JSON.stringify(user, null, '  ');
+    } else {
+      document.getElementById('sign-in-status').textContent = 'Signed out';
+      document.getElementById('account-details').textContent = 'null';
+    }
+  }
+</script>
+</body>
+</html>