[firebase web] 파이어베이스 초기 세팅, 시작 방법

안녕하세요. 말랑고양입니다. 

파이어베이스 초기 세팅 방법을 공유합니다. 궁금한 점이 있다면 댓글 남겨주세요.

Messaging example

1. Install the Node.JS framework (here the link to download for your system). I show you how to do it with Linux but the procedure should be the same.
2. Using command-line install firebase CLI using the command: npm install -g firebase-tools(may need sudo if it fails).
3. Type firebase login. This will open your browser and let you login to your Google account.
4. Download the repository with git clone https://github.com/firebase/quickstart-js.git
5. Enter repo directory cd quickstart-js
6. Go to Firebase console here and then Create new project
7. In the dashboard of your project click on Add Firebase to your web application and copy the javascript code that is prompted to you.
8. Open index.html in messaging folder and at line 83 paste the code copied from dashboard.

9. Type command firebase init in messaging folder and then answer the questions that will be asked you:

   What Firebase CLI features do you want to setup for this folder?
   --> Hosting: Configure and deploy Firebase Hosting sites
   
   What file should be used for Database Rules?
   --> Blank, it is not relevant for this example.
   
   What do you want to use as your public directory? (public)
   --> .
   
   Configure as a single-page app (rewrite all urls to /index.html)?
   --> y
   
   File ./index.html already exists. Overwrite?
   --> N
   

10. Type command firebase serve -p 8081 (or any other free port you have)

11. Go to http://localhost:8081/index.html
12. Click Request permission (the registration token will appear if the operation succeed)
13. In another tab go to https://console.firebase.google.com/project/_/settings/cloudmessaging, select your project and save the server key (the long one)

14. Type

    curl -X POST -H "Authorization: key=YOUR-SERVER-KEY" -H "Content-Type:   
    application/json" -d '{
      "notification": {
         "title": "Portugal vs. Denmark",
         "body": "5 to 1",
         "icon": "firebase-icon.png",
         "click_action": "http://localhost:8081"
       },
       "to": "YOUR-IID-TOKEN"
    }' "https://fcm.googleapis.com/fcm/send"
    

    replacing YOUR-SERVER-KEY with the copied server key and YOUR-IID-TOKEN with the string appeared here after clicking on Request permission. If everything is done correctly a notification will appear in the local page in this form

    Received message:
    {
      "from": "xxxxxxxxxx",
      "collapse_key": "do_not_collapse",
      "notification": {
        "title": "Portugal vs. Denmark",
        "body": "5 to 1",
        "icon": "firebase-icon.png",
        "click_action": "http://localhost:8081"
      }
    }
    

Database example

You don't need to run firebase init because the firebase.json file is already present and configured in the repository. But if you want to use it you have to:

1. Paste you credentials (same of the previous step 7) in the head section of index.html page.
2. Go to firebase dashboard --> your project --> Authentication --> Authentication Method, and choose the method you want (email/password, google, etc.)
3. In quickstart-js/database folder type command firebase serve and the application will be loaded to this page.
4. Go to that page and click on Sign in with Google, type your credential, and enjoy it! :-)

Auth example

You don't need to run firebase init because the firebase.json file is already present and configured in the repository. To use it (I've not tried it) with facebook for example you should:

1. Paste your credentials in facebook-credentials.html in head section
2. In the script section at the end of that page paste <YOUR_FACEBOOK_APP_ID>
3. Type in folder quickstart-js/auth the command firebase serve and the application will be loaded to this page.
4. Go to localhost:5000 and click on Facebook Login using OAuth Credentials (via Facebook Login Button) to login.

If you want to use other methods you'll have to modify the corresponding file in the same way (facebook-popup.html, facebook-redirect, etc.)

Feel free to ask if it is not clear.