Switched samples with a web component to use implicit Web init

Change-Id: I841ef7dc4b86292ecdbe3ebd9295eade84d15058

Author: Nicolas Garnier

authorized-https-endpoint/README.md

@@ -16,7 +16,6 @@ This sample comes with a simple web-based UI which code is in [public](public) d
  1. Create a Firebase Project using the [Firebase Console](https://console.firebase.google.com).
  1. Enable the **Google** Provider in the **Auth** section.
  1. Clone or download this repo and open the `authenticated-https-endpoint` directory.
- 1. Paste the Web initialization snippet from: **Firebase Console > Overview > Add Firebase to your web app** in the `public/index.html` where the `TODO` is located.
  1. You must have the Firebase CLI installed. If you don't have it install it with `npm install -g firebase-tools` and then configure it with `firebase login`.
  1. Configure the CLI locally by using `firebase use --add` and select your project in the list.
  1. Install dependencies locally by running: `cd functions; npm install; cd -`

authorized-https-endpoint/public/index.html

@@ -68,9 +68,9 @@ <h3>Authorized HTTP Function demo</h3>
 </div>
 
 <!-- Firebase -->
-<!-- ***********************************************************************************************************************
-     * TODO(DEVELOPER): Paste the initialization snippet from: Firebase Console > Overview > Add Firebase to your web app. *
-     *********************************************************************************************************************** -->
+<script src="/__/firebase/3.7.4/firebase-app.js"></script>
+<script src="/__/firebase/3.7.4/firebase-auth.js"></script>
+<script src="/__/firebase/init.js"></script>
 
 <script src="main.js"></script>
 </body>

authorized-https-endpoint/public/main.js

@@ -23,7 +23,7 @@ function Demo() {
     this.signOutButton = document.getElementById('demo-sign-out-button');
     this.responseContainer = document.getElementById('demo-response');
     this.urlContainer = document.getElementById('demo-url');
-    this.helloFunctionUrl = 'https://us-central1-' + config.authDomain.split('.')[0] + '.cloudfunctions.net/authorizedHello/';
+    this.helloFunctionUrl = 'https://us-central1-' + firebase.app().options.authDomain.split('.')[0] + '.cloudfunctions.net/authorizedHello/';
     this.signedOutCard = document.getElementById('demo-signed-out-card');
     this.signedInCard = document.getElementById('demo-signed-in-card');
 

email-confirmation/README.md

@@ -34,22 +34,21 @@ The function triggers on changes to `/users/$uid` and exits if there are no chan
 
 ## Setting up the sample
 
-Set the `gmail.email` and `gmail.password` Google Cloud environment variables to match the email and password of the Gmail account used to send emails. For this use:
-
-```bash
-firebase functions:config:set gmail.email="[email protected]" gmail.password="secretpassword"
-```
-
-This sample comes with a web-based UI for testing the function. To set it up:
-
- - Create a Firebase Project using the [Firebase Developer Console](https://console.firebase.google.com)
- - Enable Google Provider in the [Auth section](https://console.firebase.google.com/project/_/authentication/providers)
- - Import and configure Firebase in the `public/index.html` where the `TODO` is located
-
+ 1. Create a Firebase Project using the [Firebase Console](https://console.firebase.google.com).
+ 1. Enable the **Google** Provider in the **Auth** section.
+ 1. Clone or download this repo and open the `email-confirmation` directory.
+ 1. You must have the Firebase CLI installed. If you don't have it install it with `npm install -g firebase-tools` and then configure it with `firebase login`.
+ 1. Configure the CLI locally by using `firebase use --add` and select your project in the list.
+ 1. Install dependencies locally by running: `cd functions; npm install; cd -`
+ 1. Set the `gmail.email` and `gmail.password` Google Cloud environment variables to match the email and password of the Gmail account used to send emails. For this use:
+    ```bash
+    firebase functions:config:set gmail.email="[email protected]" gmail.password="secretpassword"
+    ```
 
 ## Deploy and test
 
 This sample comes with a web-based UI for testing the function. To test it out:
 
- - Deploy your project using `firebase deploy`
- - Open the app using `firebase open`, Sign in using Google Sign-In and subscribe/unsubscribe to the newsletter and you should receive email confirmations
+ 1. Deploy your project using `firebase deploy`
+ 1. Open the app using `firebase open hosting:site`, this will open a browser.
+ 1. Sign in the web app in the browser using Google Sign-In and delete your account using the button on the web app. You should receive email confirmations for each actions.

email-confirmation/main.css

@@ -97,9 +97,10 @@ <h3>Very interesting website with Newsletter</h3>
 </div>
 
 <!-- Firebase -->
-<!-- ***********************************************************************************************************************
-     * TODO(DEVELOPER): Paste the initialization snippet from: Firebase Console > Overview > Add Firebase to your web app. *
-     *********************************************************************************************************************** -->
+<script src="/__/firebase/3.7.4/firebase-app.js"></script>
+<script src="/__/firebase/3.7.4/firebase-auth.js"></script>
+<script src="/__/firebase/3.7.4/firebase-database.js"></script>
+<script src="/__/firebase/init.js"></script>
 
 <script src="main.js"></script>
 </body>

email-confirmation/public/index.html

@@ -28,16 +28,19 @@ For example the metadata for the file at path `/1477402116302/mypic.jpg` will be
 
 This sample comes with a Function and web-based UI for testing the function. To configure it:
 
- - Create a Firebase project on the [Firebase Console](https://console.firebase.google.com)
- - Enable Anonymous sign in the Auth section
- - Import and configure Firebase in the `index.html` where the `TODO` is located
+ 1. Create a Firebase Project using the [Firebase Console](https://console.firebase.google.com).
+ 1. Enable the **Anonymous** sign-in in the **Auth** section.
+ 1. Clone or download this repo and open the `exif-image` directory.
+ 1. You must have the Firebase CLI installed. If you don't have it install it with `npm install -g firebase-tools` and then configure it with `firebase login`.
+ 1. Configure the CLI locally by using `firebase use --add` and select your project in the list.
+ 1. Install dependencies locally by running: `cd functions; npm install; cd -`
 
 
 ## Deploy and test
 
 To test the sample:
 
- - Deploy your project using `firebase deploy`
- - Open the Deploy Web UI using `firebase open`, typically at the URL `https://<projectID>.firebaseapp.com`
- - Upload an image using the Web UI.
- - You should see the metadata displayed below after a bit.
+ 1. Deploy your project using `firebase deploy`
+ 1. Open the app using `firebase open hosting:site`, this will open a browser.
+ 1. Upload an image using the Web UI.
+ 1. You should see the metadata displayed below after a bit.

exif-images/README.md

@@ -26,19 +26,6 @@
   <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
 
   <link rel="stylesheet" href="main.css">
-
-  <!-- Firebase -->
-  <!-- *******************************************************************************
-       * TODO(DEVELOPER): Paste the initialization snippet by navigating to:
-
-        https://console.firebase.google.com
-
-       and choosing a project you've created.  Then click the red HTML logo at the top
-       right of the page with the caption "Add Firebase to your web app".
-
-       Copy the snippet that appears in place of this comment.
-       *************************************************************************** -->
-
 </head>
 <body>
   <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
@@ -73,6 +60,14 @@ <h6>Image Metadata:</h6>
       </div>
     </main>
   </div>
+
+  <!-- Firebase -->
+  <script src="/__/firebase/3.7.4/firebase-app.js"></script>
+  <script src="/__/firebase/3.7.4/firebase-auth.js"></script>
+  <script src="/__/firebase/3.7.4/firebase-storage.js"></script>
+  <script src="/__/firebase/3.7.4/firebase-database.js"></script>
+  <script src="/__/firebase/init.js"></script>
+
   <script src="main.js"></script>
 </body>
 </html>

exif-images/public/index.html

@@ -53,9 +53,12 @@ The function triggers every time the value of a follow flag changes at `/followe
 
 This sample comes with a web-based UI for testing the function. To test it out:
 
- - Create a Firebase Project using the [Firebase Developer Console](https://console.firebase.google.com)
- - Enable **Google Provider** in the [Auth section](https://console.firebase.google.com/project/_/authentication/providers)
- - Import and configure Firebase in `public/index.html` where the `TODO` is located
- - Install the required dependencies by running `npm install` in the `functions` directory
- - Deploy your project using `firebase deploy`
- - Open the app and start following a user, this will send a notification to him.
+ 1. Create a Firebase Project using the [Firebase Console](https://console.firebase.google.com).
+ 1. Enable **Google Provider** in the [Auth section](https://console.firebase.google.com/project/_/authentication/providers)
+ 1. Clone or download this repo and open the `fcm-notification` directory.
+ 1. You must have the Firebase CLI installed. If you don't have it install it with `npm install -g firebase-tools` and then configure it with `firebase login`.
+ 1. Configure the CLI locally by using `firebase use --add` and select your project in the list.
+ 1. Install dependencies locally by running: `cd functions; npm install; cd -`
+ 1. Deploy your project using `firebase deploy`
+ 1. Open the app using `firebase open hosting:site`, this will open a browser.
+ 1. Start following a user, this will send a notification to him.

fcm-notifications/README.md

@@ -83,9 +83,11 @@ <h3>Send FCM notifications demo</h3>
 </div>
 
 <!-- Firebase -->
-<!-- ***********************************************************************************************************************
-     * TODO(DEVELOPER): Paste the initialization snippet from: Firebase Console > Overview > Add Firebase to your web app. *
-     *********************************************************************************************************************** -->
+<script src="/__/firebase/3.7.4/firebase-app.js"></script>
+<script src="/__/firebase/3.7.4/firebase-auth.js"></script>
+<script src="/__/firebase/3.7.4/firebase-messaging.js"></script>
+<script src="/__/firebase/3.7.4/firebase-database.js"></script>
+<script src="/__/firebase/init.js"></script>
 
 <script src="main.js"></script>
 </body>

fcm-notifications/public/index.html

@@ -8,7 +8,6 @@ This sample shows how to authenticate using Instagram Sign-In on Firebase. In th
 Create and setup the Firebase project:
  1. Create a Firebase project using the [Firebase Developer Console](https://console.firebase.google.com).
  1. Enable Billing on your Firebase the project by switching to the **Blaze** plan, this is currently needed to be able to perform HTTP requests to external services from a Cloud Function.
- 1. Copy the Web initialisation snippet from **Firebase Console > Overview > Add Firebase to your web app** and paste it in `public/index.html` and `public/popup.html` in lieu of the placeholders (where the `TODO(DEVELOPER)` are located).
 
 Create and provide a Service Account's credentials:
  1. Create a Service Accounts file as described in the [Server SDK setup instructions](https://firebase.google.com/docs/server/setup#add_firebase_to_your_app).
@@ -19,9 +18,9 @@ Create and setup your Instagram app:
  1. Once Your app is created make sure you specify your app's callback URL in the list of **Valid redirect URIs** of your Instagram app. You should whitelist `https://localhost:5000/popup.html` for local development and if you deploy on App Engine (See Deploy section below) you should whitelist the URL `https://<application-id>.firebaseapp.com/popup.html`.
  1. Copy the **Client ID** and **Client Secret** of your Instagram app and use them to set the `instagram.client_id` and `instagram.client_secret` Google Cloud environment variables. For this use:
 
-```bash
-firebase functions:config:set instagram.client_id="yourClientID" instagram.client_secret="yourClientSecret"
-```
+    ```bash
+    firebase functions:config:set instagram.client_id="yourClientID" instagram.client_secret="yourClientSecret"
+    ```
 
  > Make sure the Instagram Client Secret is always kept secret. For instance do not save it in your version control system.
 

instagram-auth/README.md

@@ -68,9 +68,9 @@ <h3>Sign in with Instagram demo</h3>
 </div>
 
 <!-- Firebase -->
-<!-- ***********************************************************************************************************************
-     * TODO(DEVELOPER): Paste the initialization snippet from: Firebase Console > Overview > Add Firebase to your web app. *
-     *********************************************************************************************************************** -->
+<script src="/__/firebase/3.7.4/firebase-app.js"></script>
+<script src="/__/firebase/3.7.4/firebase-auth.js"></script>
+<script src="/__/firebase/init.js"></script>
 
 <script src="main.js"></script>
 </body>

instagram-auth/public/index.html

@@ -24,9 +24,9 @@
 Please wait...
 
 <!-- Firebase -->
-<!-- ***********************************************************************************************************************
-     * TODO(DEVELOPER): Paste the initialization snippet from: Firebase Console > Overview > Add Firebase to your web app. *
-     *********************************************************************************************************************** -->
+<script src="/__/firebase/3.7.4/firebase-app.js"></script>
+<script src="/__/firebase/3.7.4/firebase-auth.js"></script>
+<script src="/__/firebase/init.js"></script>
 
 <script>
   /**

instagram-auth/public/popup.html

@@ -8,7 +8,6 @@ This sample shows how to authenticate using LinkedIn Sign-In on Firebase. In thi
 Create and setup the Firebase project:
  1. Create a Firebase project using the [Firebase Developer Console](https://console.firebase.google.com).
  1. Enable Billing on your Firebase the project by switching to the **Blaze** plan, this is currently needed to be able to perform HTTP requests to external services from a Cloud Function.
- 1. Copy the Web initialisation snippet from **Firebase Console > Overview > Add Firebase to your web app** and paste it in `public/index.html` and `public/popup.html` in lieu of the placeholders (where the `TODO(DEVELOPER)` are located).
 
 Create and provide a Service Account's credentials:
  1. Create a Service Accounts file as described in the [Server SDK setup instructions](https://firebase.google.com/docs/server/setup#add_firebase_to_your_app).
@@ -20,9 +19,9 @@ Create and setup your LinkedIn app:
     **OAuth 2.0** > **Authorized Redirect URLs** of your LinkedIn app.
  1. Copy the **Client ID** and **Client Secret** of your LinkedIn app and use them to set the `linkedin.client_id` and `linkedin.client_secret` Google Cloud environment variables. For this use:
 
-```bash
-firebase functions:config:set linkedin.client_id="yourClientID" linkedin.client_secret="yourClientSecret"
-```
+    ```bash
+    firebase functions:config:set linkedin.client_id="yourClientID" linkedin.client_secret="yourClientSecret"
+    ```
 
  > Make sure the LinkedIn Client Secret is always kept secret. For instance do not save this in your version control system.
 

linkedin-auth/README.md

@@ -69,9 +69,9 @@ <h3>Sign in with LinkedIn demo</h3>
 </div>
 
 <!-- Firebase -->
-<!-- ***********************************************************************************************************************
-     * TODO(DEVELOPER): Paste the initialization snippet from: Firebase Console > Overview > Add Firebase to your web app. *
-     *********************************************************************************************************************** -->
+<script src="/__/firebase/3.7.4/firebase-app.js"></script>
+<script src="/__/firebase/3.7.4/firebase-auth.js"></script>
+<script src="/__/firebase/init.js"></script>
 
 <script src="main.js"></script>
 </body>

linkedin-auth/public/index.html

@@ -24,9 +24,9 @@
 Please wait...
 
 <!-- Firebase -->
-<!-- ***********************************************************************************************************************
-     * TODO(DEVELOPER): Paste the initialization snippet from: Firebase Console > Overview > Add Firebase to your web app. *
-     *********************************************************************************************************************** -->
+<script src="/__/firebase/3.7.4/firebase-app.js"></script>
+<script src="/__/firebase/3.7.4/firebase-auth.js"></script>
+<script src="/__/firebase/init.js"></script>
 
 <script>
   /**

linkedin-auth/public/popup.html

@@ -55,10 +55,13 @@ The security rules only allow users to create message but not edit them afterwar
 
 ## Deploy and test
 
-This sample comes with a web-based UI for testing the function. To test it out:
-
- - Create a Firebase Project using the [Firebase Developer Console](https://console.firebase.google.com)
- - Import and configure Firebase in `public/index.html` where the `TODO` is located
- - Install the required dependencies by running `npm install` in the `functions` directory
- - Deploy your project using `firebase deploy`
- - Open the app and add messages to the message board. Try to ad bad words into your message and they should get moderated.
+This sample comes with a Function and web-based UI for testing the function. To configure it:
+
+ 1. Create a Firebase Project using the [Firebase Console](https://console.firebase.google.com).
+ 1. Clone or download this repo and open the `text-moderation` directory.
+ 1. You must have the Firebase CLI installed. If you don't have it install it with `npm install -g firebase-tools` and then configure it with `firebase login`.
+ 1. Configure the CLI locally by using `firebase use --add` and select your project in the list.
+ 1. Install dependencies locally by running: `cd functions; npm install; cd -`
+ 1. Deploy your project using `firebase deploy`
+ 1. Open the app using `firebase open hosting:site`, this will open a browser.
+ 1. Open the app and add messages to the message board. Try to ad bad words into your message and they should get moderated.

text-moderation/README.md

@@ -91,9 +91,9 @@ <h2 class="mdl-card__title-text">Last Guestbook's messages</h2>
 </div>
 
 <!-- Firebase -->
-<!-- ***********************************************************************************************************************
-     * TODO(DEVELOPER): Paste the initialization snippet from: Firebase Console > Overview > Add Firebase to your web app. *
-     *********************************************************************************************************************** -->
+<script src="/__/firebase/3.7.4/firebase-app.js"></script>
+<script src="/__/firebase/3.7.4/firebase-database.js"></script>
+<script src="/__/firebase/init.js"></script>
 
 <script src="main.js"></script>
 </body>