i wi sh для создания социальных сетей, таких как instagram, где пользователи могут входить в систему, входить в систему и поддерживать собственную страницу профиля в нашем веб-приложении. используя firebase auth, я могу войти в систему, войти, выйти из коллекции данных. Я следил за видео на YouTube и кодировал:
login. html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>login page</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase.js-app"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-analytics.js"></script>
<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" />
</head>
<body>
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>
<script src='firebase.js'></script>
<script src='login.js'></script>
</body>
</html>
main . html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>main page</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase.js-app"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-analytics.js"></script>
</head>
<body>
<h1>welcome to your profile in my social media</h1>
<script src='firebase.js'></script>
</body>
</html>
login. js
(function(){
// Initialize the FirebaseUI Widget using Firebase.
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,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.PhoneAuthProvider.PROVIDER_ID
],
// Terms of service url.
tosUrl: '<your-tos-url>',
// Privacy policy url.
privacyPolicyUrl: 'main.html'
};
ui.start('#firebaseui-auth-container', uiConfig);
})()
firebase. js
(function(){
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyAWMD61EmO6HgvDWcZAGr3khTqhy_9iSvY",
authDomain: "socialmedia-f9d28.firebaseapp.com",
databaseURL: "https://socialmedia-f9d28.firebaseio.com",
projectId: "socialmedia-f9d28",
storageBucket: "socialmedia-f9d28.appspot.com",
messagingSenderId: "1076392319072",
appId: "1:1076392319072:web:ac8424e42f3bc880cc4b05",
measurementId: "G-BP3YRZVD6F"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
})()
эти коды должны давать пользователю возможность входа в систему! и как только вход выполнен, он должен перейти к main. html .. 1.if main. html это страница профиля пользователя, она уникальна для каждого входа в систему пользователей? или одна и та же главная страница. html будет отображаться для всех пользователей? 2. пробуя этот код в виртуальном хосте wamp, ничего не делаю. Что я хочу сделать для запуска кодов firebase .?
заранее спасибо ..