This ID is intended to be used in apps that have gone through Snapchat’s app review process.
Once you’re in the right section, turn on the “web” switch, and copy the client ID listed below.
You’ll need it pretty soon!At this point, if you’ve saved your client ID, you can close Snap Kit’s website.
We’re done configuring the app on Snapchat’s side; it’s time to write some code.
Write Your Site’s CodeFor this tutorial, we’re going to build a static website (instead of using something like Node.
js, since we don’t need a backend to use Login Kit).
Create a folder with two files, index.
html and style.
css.
You can do this with a few commands in your terminal:mkdir login-democd login-demotouch index.
htmltouch style.
cssPaste the following code into your style.
css file:* { margin: 0; padding: 0;}.
hidden { display: none;}#container { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%);}#login-button button { cursor: pointer; font-family: Helvetica, Arial, sans-serif;}This file will provide some basic styling for our frontend app.
Now, paste the following code into your index.
html file:<!DOCTYPE html><html> <head> <link rel="stylesheet" href="style.
css" /> <title>Snapchat Login Demo</title> </head> <body> <div id="container"> <div id="login-button"></div> <div id="profile" class="hidden"> <img id="picture" src="#" /> <p id="welcome">Welcome!</p> </div> </div> </body> <script> window.
snapKitInit = () => { snap.
loginkit.
mountButton("login-button", { clientId: "[INSERT YOUR CLIENT ID HERE]", redirectURI: "http://localhost:8000", scopeList: [ "user.
display_name", "user.
bitmoji.
avatar", ], handleResponseCallback: () => { snap.
loginkit.
fetchUserInfo().
then(data => { document.
getElementById("login-button").
classList.
add("hidden") document.
getElementById("profile").
classList.
remove("hidden") document.
getElementById("picture").
src = data["data"]["me"]["bitmoji"]["avatar"] document.
getElementById("welcome").
innerHTML = "Welcome, " + data["data"]["me"]["displayName"] + "!" }) }, }) } // Load the SDK asynchronously (function (d, s, id) { var js, sjs = d.
getElementsByTagName(s)[0]; if (d.
getElementById(id)) return; js = d.
createElement(s); js.
id = id; js.
src = "https://sdk.
snapkit.
com/js/v1/login.
js"; sjs.
parentNode.
insertBefore(js, sjs); }(document, "script", "loginkit-sdk")); </script></html>Make sure to insert your client ID from earlier on line 19, where I left a placeholder.
The file has some basic HTML, along with some Javascript to load Login Kit and handle the login flow.
Test Your AppNow that you’re done writing your app’s code, run python -m http.
server in your terminal while in your project’s directory to create a local webserver (if you have Python 2 installed instead of Python 3, this command will be python -m SimpleHTTPServer).
Open http://localhost:8000 in your browser, and you should see a page with a yellow button like the one below.
Click the button and you should see Snapchat’s OAuth popup.
Log in with your Snapchat account, and click “Continue” on the next page, which should look like the one in the screenshot below:Snapchat will redirect you to your app, and you’ll see your name and your bitmoji (if you have one) instead of the Snapchat login button.
If any of your friends log into your app, they’ll see their name and bitmoji instead.
If you get an error, double check your app details in Snap Kit.
You may not have turned “Web” on or used the development environment version of your client ID.
(I promise this is not what I look like in real life)If all goes well, you should see your page turn into something like the one pictured above!.(I promise this isn’t what I look like in real life).
This will work for the Snapchat account you used to earlier for Snap Kit, but if you want any of your friends to be able to use your project, you’ll need to make one more change.
On the bottom of your project’s page, you can add your friends’ usernames under “Demo Users,” as shown below.
Otherwise, they won’t be able to use your app.
Congratulations, you’ve just added authentication to a simple web app!.This works similarly to how many websites today will allow you to log in with your Facebook or Google accounts, and allows you to have an account without the hassle of remembering another password.
Whether you’re hacking with Snap Kit or building something completely unrelated to Snapchat, Login Kit is an easy way to implement user accounts at your next hackathon.
.