СМС авторизация на сайте с помощью Google Firebase
Доброго времени суток! Сегодня я покажу Вам как с помощью сервиса Firebase можно авторизовать пользователя на сайте.
Firebase - это сервис, который, посредством API, предоставляет услуги аутентификации, хостинга, базы данных - бесплатно (для небольших проектов). Одних только методов аутентификации в нем больше 10.
Итак, вот код:
<!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>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid d-flex flex-column" style="min-height: 100vh">
<div class="row">
<div class="col-md-12 p-0">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand pl-3" href="#">MyBlog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
<form class="form-inline my-2 my-lg-0 float-right">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
<div class="row" style="flex: 1 1 auto">
<div class="col-md-2 bg-dark pt-0 pl-1 pr-1" style="background: #173a5c !important;">
<div class="text-center">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/mrmoiree/128.jpg" class="rounded-circle my-4" alt="admin">
<p class="text-white-50 mb-4">Amran Khan</p>
</div>
<ul class="nav flex-column text-center">
<li class="nav-item">
<a class="nav-link active text-white" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="settings.html">Settings</a>
</li>
</ul>
</div>
<div class="col-md-10 pt-3">
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-transparent pl-0 pt-0">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Sign-in methods</a></li>
<li class="breadcrumb-item active" aria-current="page">SMS Sign-in</li>
</ol>
</nav>
<div class="container">
<h2>Sign-in with Phone number</h2>
<form>
<div class="form-group">
<label for="phoneNumber">Phone number</label>
<input type="tel" class="form-control" id="phoneNumber" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your phone with anyone else.</small>
</div>
<div class="form-group">
<label for="numberCode">Code</label>
<input type="number" class="form-control" id="numberCode">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="rememberMe">
<label class="form-check-label" for="rememberMe">Remember me</label>
</div>
<!-- Add a container for reCaptcha -->
<div id="recaptcha-container" class="mt-4 mb-4"></div>
<button id="signInButton" type="submit" class="btn btn-primary">SIGN IN WITH PHONE</button>
<button id="confirmCode" type="submit" class="btn btn-info">ENTER CODE</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://www.google.com/recaptcha/api.js?hl=ru" async defer></script>
<!-- добавляем модули Firebase -->
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-auth.js"></script>
<script>
const firebaseConfig = {
// здесь ваши настройки, которые Вы получите, когда зарегистрируетесь на Firebase
};
firebase.initializeApp(firebaseConfig);
firebase.auth().language = 'ru';
// создаем глобально объект капчи
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier("recaptcha-container");
// выводим капчу
recaptchaVerifier.render().then(widgetId => window.recaptchaWidgetId = widgetId);
document.querySelector('#signInButton').addEventListener('click', (event) => {
event.preventDefault();
let phoneNumber = document.querySelector("#phoneNumber").value;
let appVerifier = window.recaptchaVerifier;
console.log(phoneNumber)
firebase
.auth()
.signInWithPhoneNumber(phoneNumber, appVerifier)
.then(confirmationResult => {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
window.confirmationResult = confirmationResult;
alert("SMS successfully sent. Please enter received code!");
}).catch(error => {
console.log('Error',error);
// Error; SMS not sent
// Or, if you haven't stored the widget ID:
window.recaptchaVerifier.render().then(widgetId => grecaptcha.reset(widgetId));
});
}, false);
// клик на кнопку ввода кода
document.querySelector('#confirmCode').addEventListener('click', (event) => {
event.preventDefault();
const code = document.querySelector('#numberCode').value;
console.log('Code: ', code);
confirmationResult
.confirm(code)
.then(result => {
let user = result.user;
console.log('UserName: ', user.phoneNumber, 'UserId: ', user.uid);
})
.catch(function(error) {
console.log(error);
});
}, false);
// проверка состояния входа пользователя
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
console.log("USER LOGGED IN");
console.log('UserName: ', user.phoneNumber, 'UserId: ', user.uid);
} else {
// No user is signed in.
console.log("USER NOT LOGGED IN");
}
});
</script>
</body>
</html>
Хоть код и объемный из-за разметки, тем не менее вся суть содержится в последнем теге script.
-
Создано 16.07.2020 13:24:47
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.