My current focus is on learning about the Snapchat API and I've started by delving into their Login Kit feature through a web tutorial. However, I've hit a roadblock. Whenever I try to proceed past the Snapchat login site, all I see is a message saying "Something Went Wrong." My implementation is based on the Laravel framework. Despite my application not being reviewed yet, I prefer grasping the workflow before submission. Below is a snippet of 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 tried testing the constructed login URL with both the staging Public and Confidential OAuth Client IDs, but no success. Clicking the link leads me to this page:
https://i.sstatic.net/ebq72.png
In addition, I created an OAuth flow using JavaScript like so:
<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>
Unfortunately, even with the above method, I am still encountering the same issue. I have raised this problem with the support team and am eagerly awaiting their response. Any guidance from your end would be greatly appreciated.