<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

Данный курс научит Вас программировать на языке C#, который является одним из самых востребованных языков программирования в мире. Курс состоит из 7 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики. Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

СМС авторизация на сайте с помощью Google Firebase

СМС авторизация на сайте с помощью 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.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.