I'm currently learning about the Snapchat API. I began by exploring their Login Kit feature through a web tutorial, but I'm encountering an issue. I'm unable to proceed past the Snapchat login site as it only displays the message "Something Went Wrong." I'm implementing this using the Laravel framework. I am still using my application, which has not yet been reviewed, because I want to understand the workflow before I submit it for review. my Here's my code:
$state = Crypt::encryptString(Str::random(10));
$url = 'https://accounts.snapchat.com/accounts/oauth2/auth?'.http_build_query([
'client_id' => '<insert my staging Public / Confidential OAuth Client ID>'
'redirect_uri' => 'https://example.com/snapchat/callback',
'response_type' => 'code',
'scope' => 'https://auth.snapchat.com/oauth2/api/user.display_name https://auth.snapchat.com/oauth2/api/user.bitmoji.avatar https://auth.snapchat.com/oauth2/api/user.external_id',
'state' => $state
]);
I've constructed a login URL and attempted testing it with both the staging Public and Confidential OAuth Client IDs, but neither of them have been successful. Upon accessing the link, it redirects me to this page:
i also built the OAuth flow use Javascript like this
<body>
<div id="display_name"></div>
<img id="bitmoji" />
<div id="external_id"></div>
<hr />
<div id="my-login-button-target"></div>
</body>
<script>
window.snapKitInit = function () {
var loginButtonIconId = "my-login-button-target";
// Mount Login Button
snap.loginkit.mountButton(loginButtonIconId, {
clientId: "<insert my staging Public / Confidential OAuth Client ID>",
redirectURI: "https://example.com/snapchat/callback",
scopeList: [
"user.display_name",
"user.bitmoji.avatar",
"user.external_id",
],
handleResponseCallback: function () {
snap.loginkit.fetchUserInfo().then(
function (result) {
console.log("User info:", result.data.me);
document.getElementById("display_name").innerHTML =
result.data.me.displayName;
document.getElementById("bitmoji").src =
result.data.me.bitmoji.avatar;
document.getElementById("external_id").src =
result.data.me.externalId;
},
function (err) {
console.log(err); // Error
}
);
},
});
};
// 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>
However, this also displays the same page. I have already reported this issue to the support team, but I am still awaiting a response. Your advice would be appreciated
I encountered the same issue, and it took me some time to find the issue :
If you are developping/testing your application, and use your staging ClientID, then you need to add your username as a Demo User in the developer portal.