Аутентификация Firebase для Интернета

Firebase — это платформа для разработки мобильных и веб-приложений, которая предоставляет множество инструментов, помогающих разработчикам использовать базы данных в реальном времени, монетизировать свои приложения, отслеживать отчеты о сбоях и многое другое. Этот пост будет в первую очередь посвящен базе данных Firebase Realtime. По сути, это размещенная в облаке база данных NoSQL, которая позволяет хранить данные и синхронизировать их между пользователями в режиме реального времени. Мы собираемся реализовать аутентификацию Firebase для Интернета.

Давайте перейдем к делу. Во-первых, вам нужно установить предпочитаемый вами текстовый редактор. Лично я предпочитаю Visual Studio Code за его уникальную простоту. Создайте файл и назовите его login.html и напишите следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Login Page</title>
</head>
<body>
<script src="firebase.js"></script>
<script src="login.js"></script>
</body>
</html>

Создайте еще один файл и назовите его main.html и повторите процесс с приведенным выше кодом. Измените заголовок на Главная страница или любое другое имя.

Затем перейдите в консоль Firebase, нажмите Добавить проект и примите условия. На панели управления проекта нажмите Добавить Firebase в свой веб-проект. Скопируйте приведенный ниже скрипт и вставьте его на свои login.html и main.html страницы перед закрывающим тегом </head> :

<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase.js"></script>

Добавьте новый файл и назовите его firebase.js. В него скопируйте код, который инициализирует Firebase, который идет сразу после приведенного выше фрагмента кода. (Не копируйте теги <script>). Желательно обернуть ваш скрипт firebase функцией, вызываемой самостоятельно, чтобы сделать его приватным. Итак, мой код выглядит так:

var app_firebase = {};
(function(){
//Initialize firebase
var config = {
    apiKey: "MY_API_KEY",//placeholder for real API key
    authDomain: "MY_APP.firebaseapp.com", //placeholder for app name
    databaseURL: "https://MY_APP.firebaseio.com",
    projectId: "MY_APP",
    storageBucket: "MY_APP.appspot.com",
    messagingSenderId: "2236250329"
  };
  firebase.initializeApp(config);
app_firebase = firebase;
})()

Создайте еще один файл и назовите его login.js и напишите следующий код:

(function(){
var ui = new firebaseui.auth.AuthUI(firebase.auth());
var uiConfig = {
callbacks: {
signInSuccessWithAuthResult: function(authResult, redirectUrl) {
// User successfully signed in.
// Return type determines whether we continue the redirect automatically
// or whether we leave that to developer to handle.
return true;
},
uiShown: function() {
// The widget is rendered.
// Hide the loader.
document.getElementById('loader').style.display = 'none';
}
},
// Will use popup for IDP Providers sign-in flow instead of the default, redirect.
signInFlow: 'popup',
signInSuccessUrl: 'main,html',
signInOptions: [
// Leave the lines as is for the providers you want to offer your users.
firebase.auth.GoogleAuthProvider.PROVIDER_ID, //Google sign in
firebase.auth.FacebookAuthProvider.PROVIDER_ID, //Facebook sign in
firebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter sign in
firebase.auth.GithubAuthProvider.PROVIDER_ID, //Github sign in
firebase.auth.EmailAuthProvider.PROVIDER_ID, //Email sign in
firebase.auth.PhoneAuthProvider.PROVIDER_ID //Phone sign in
],
// Terms of service url.
tosUrl: '<your-tos-url>', //replace with your terms of service url
// Privacy policy url.
privacyPolicyUrl: '<your-privacy-policy-url>' //replace with your privacy policy url
};
ui.start('#firebaseui-auth-container', uiConfig);
})()

Затем перейдите на свою login.html страницу и скопируйте этот код в раздел <body>:

<h1>Welcome to My Firebase Auth App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>

После этого перейдите на страницу login.html и скопируйте приведенный ниже скрипт прямо под скриптом firebase js:

<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />

Это инициализирует пользовательский интерфейс firebase с собственными пользовательскими функциями css и js.

На странице main.html напишите свою приветственную страницу в теге <body>:

<h1>Welcome to the Main Page</h1>

Перейдите в консоль Firebase и нажмите на вкладку метода входа. Включите все функции входа, которые вы хотите купить, нажав на значок карандаша. В файле login.js выберите нужный вариант регистрации и удалите или закомментируйте остальные. Желательно протестировать работающее веб-приложение на локальном сервере. Тебе должно быть хорошо идти.

Аутентификация Firebase для Интернета

Вопросы по теме