Auth0 Login’i JavaScript ile Kullanma

Raymond Camden

çalışmış olmasına rağmen Yetki0 birkaç yıl önce, ana kimlik ürünlerini hiç kullanmadım. (Oradayken, sunucusuz bir teklif üzerinde çalışan bir ekibin parçasıydım.) Ürünü denemek bir süredir aklımın bir köşesindeydi, ancak buna hiç alışamadım. Geçen hafta Adobe tatil için kapatıldı, bu yüzden çok fazla boş zamanım olduğu için sonunda bir şans vermeye karar verdim. Çalışan bir şeyim var, ancak belgelerinde bazı sorunlar yaşadım, bu yüzden karşılaştığım şeyi paylaşacağımı düşündüm ve bazı kodların da başkaları için yararlı olacağını umarak.

Hızlı Başlangıç ​​- Birinci Sayı

Tamam, her şey kullandığımda başladı JavaScript hızlı başlangıç rehberim olarak. Çerçeveye özgü olmayan ve olabildiğince basit bir şey istedim. Üstteki “bu bir beta” uyarısını tamamen kaçırdığımı söyleyeceğim, ancak forumları ve diğer yollarla bazı geri bildirimler bıraktım. Bulduklarımın çoğu biraz daha fazla belge ile düzeltilebilir, ancak işleri tamamen bozan bir sorun var. Aşağıdaki metinde bunu netleştirmek için elimden geleni yapacağım.

Sorunların dışında, hızlı başlangıç ​​oldukça iyi yapılmış. Özellikle kılavuzda kodunuz için bir şeyler ayarlamayı nasıl teklif ettiğini seviyorum:

Ancak bu seçeneği kullanırsanız, uygulamayı yanlış yapılandırılmış bir ayarla oluşturur. Devam edin ve öğreticinin uygulamayı oluşturmasına izin verin, ancak ardından Gösterge Paneli başka bir sekmede Uygulamalar panelini açın ve yeni uygulamanızı seçin. (Muhtemelen tek olacaktır.) Ayarlar panelinde olmalısınız ve Uygulama özelliklerine inerseniz, Belirteç Uç Nokta Kimlik Doğrulama Yöntemi:

Token Bitiş Noktası ayarları

Oradaki sarı uyarıyı görüyor musun? Hızlı başlangıçtan geçerken giriş yapamadım, rastgele buraya geldim, bunu fark ettim ve tamam, değiştirelim dedim. “Yok” olarak değiştirin, kaydedin ve artık devre dışı olduğunu fark edeceksiniz:

Devre dışı ayarı

Diğer ayarları değiştirirseniz yeniden etkinleştirilebileceğini varsayıyorum, ancak tek bildiğim demo kodumu çalıştırmak için yeterli olduğu.

Hızlı Başlangıç ​​- İkinci Sayı

Karşılaştığım ikinci sorun %100 benim hatamdı, ancak diğer insanların da aynı hatayı yapabileceği varsayımıyla paylaşayım dedim. Hızlı başlangıcı aşağı kaydırdığınızda, sağ taraftaki içerik değişir. Bu herkes için çok açık. Sanırım. Ancak üçüncü adımdaydım ve metin ne yapacağımı açıklamadığı için sıkışıp kaldım:

Eğitimden çekim

Anlaşılan – biraz daha kaydırmam gerekiyordu:

Eğitimden çekildi - aşağı kaydırın

Evet… Bunu fark etmeliydim ama dediğim gibi, eğer benim gibiyseniz bu hatayı tekrarlamayın.

Getireceğim üçüncü konu daha genel ve dokümanları biraz detaylandırarak düzeltilebilir – ancak üçüncü adımdan sonra işler biraz belirsizleşiyor. Örneğin, dördüncü adımda sizden bir oturum açma düğmesi eklemenizi istiyorlar, ancak daha önce gösterilen varsayılan kodun belirli bir kimliğe sahip bir oturum açma düğmesi gerektirdiğinden bahsetmiyorlar. Ayrıca bir çıkış düğmesi. Ayrıca profil için bir div. Eğer benim gibiyseniz ve her kod değişikliğinden sonra test yapıyorsanız bu sizi savuracaktır.

Özellikle bu yeterlidir:

<button id="login">Login</button>
<button id="logout">Logout</button>
<div id="profile"></div>

Ve aslında, öğreticinin benim için ayrı düştüğü yer burasıdır. Devam ettim ve örneği indirdim ve… peki, tamam, sabun kutusu geliyor. “Vanilla” JS örneği, Node, docker, bir package.json, vb.’den yararlanır. Ve… açık olmak gerekirse, tüm bunlarda yanlış bir şey yok ama aman tanrım, bunların hepsi bir sayfa (göstermek üzereyim!)

Vay, üç ünlem işareti. Bir saniyeliğine soğumaya ihtiyacım var:

sakin kedi

Bir Demo

Pekala, sorunlarla karşılaşmama rağmen, her şeyi anladığımda söyleyebilirim ki, basit, tek sayfalık bir uygulamada oturum açmayı gerçekleştirebildim. Kodlarını aldım ve üretime biraz daha hazır hale getirmek için bazı şeyleri biraz değiştirdim. Örneğin, şimdi oturum açma durumuna bağlı olarak oturum açma ve oturum kapatma düğmelerini gösteriyor/gizliyorum. Ben de kodu çalıştırıyorum DOMContentLoaded normalde yapacağınız gibi. İşte tam bir örnek ve evet, normalde JavaScript’in kendi dosyasında olmasını istersiniz, ancak dediğim gibi, basit bir örnek arıyordum:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Simple Demo is Simple</title>
	<style>
	</style>

</head>
<body>

<h1>Simple Demo is Simple</h1>

<button id="login" style="display:none">Login</button>
<button id="logout" style="display:none">Logout</button>
<div id="profile" style="display:none"></div>

<script src="https://cdn.auth0.com/js/auth0-spa-js/1.20/auth0-spa-js.production.js"></script>
<script>

let loginBtn, logoutBtn, profileDiv;
let auth0Client;

document.addEventListener('DOMContentLoaded', init, false);

async function init() {
	loginBtn = document.querySelector('#login');
	logoutBtn = document.querySelector('#logout');
	profileDiv = document.querySelector('#profile');

	auth0Client = await createAuth0Client({
		domain: "dev-f8e09ups.us.auth0.com",
		client_id: "V4Yv7D5cQNb5NEbBjXzPqNELoDB2JVsI",
		redirect_uri: window.location.origin,
	});

	// handle coming back from login
	if (location.search.includes("state=") && 
		(location.search.includes("code=") || 
		location.search.includes("error="))) {
		await auth0Client.handleRedirectCallback();
		window.history.replaceState({}, document.title, "/");
	}

	const isAuthenticated = await auth0Client.isAuthenticated();
	console.log('isAuthenticated', isAuthenticated);

	if(!isAuthenticated) loginBtn.style.display = '';
	else {
		logoutBtn.style.display = null; 
		const userProfile = await auth0Client.getUser();
		profileDiv.innerHTML = `<h2>Profile</h2><pre>${JSON.stringify(userProfile,null,'t')}</pre></div>.<p><img src="${userProfile.picture}" /></p>`;
		profileDiv.style.display = '';
	}

	loginBtn.addEventListener("click", e => {
		e.preventDefault();
		auth0Client.loginWithRedirect();
	});

	logoutBtn.addEventListener("click", e => {
		e.preventDefault();
		auth0Client.logout();
	});

}
</script>
</body>
</html>

Yukarıdakilerle ilgili herhangi bir sorunuz varsa, bana bildirin. Bu kodu birden fazla sayfada kullanabileceğinizi ve beklendiği gibi çalıştığını unutmayın. Demek istediğim, index.html’deyseniz, giriş yapın ve ardından cat.html’ye gidin ve giriş durumunu kontrol edin, giriş yaptığınızı yansıtacaktır. SPA’ya gerek yok – sadece basit çalışıyor.

Her zaman olduğu gibi, yukarıdakilerle ilgili bir sorunuz varsa bize ulaşın. Bu hazırlık olarak yapıldı bir diğer Twitter ile ilgili bir demo ve şunu söylemeliyim ki, bir Twitter uygulamasını bir uygulama girişine bağlamanın Auth0 deneyimi Gerçekten aferin!

fotoğrafı çeken Micah Williams üzerinde Sıçramayı kaldır

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.