I have followed the Web: Getting Started Samples. When the function AdobeCreativeSDK.init is called it invoke https://adobeid-na1.services.adobe.com/ims/check/v4/token first with request method OPTIONS and then with request method POST, both returning status code 200 OK. The response to the POST request returns {"error":"invalid_credentials"} and I do not know why and how to solve this.
Any help will be appreciated.
Do you see something like this in your console?
XMLHttpRequest cannot load https://adobeid-na1.services.adobe.com/ims/check/v4/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://your.domain.com' is therefore not allowed access.
Then you likely do not have a valid SSL certificate.
From Adobe's Getting started with the Creative SDK for Web:
If you get an XMLHttpRequest error due to 'Access-Control-Allow-Origin', there is likely an issue with your SSL setup (as noted in the “Prerequisites” section of this guide, SSL is required).
And here's what's stated in the Prerequisites section [emphasis added]:
Prerequisites
Before you can work with the Creative SDK, you must register your application and get Client ID (API Key) and Client Secret values. For details, see the “Registering Your Application” section of this guide.
The following software is required:
- Supported browsers: Chrome 53+, Safari 9+, Firefox 45+, Edge, IE11+
- SSL required: Your site must support SSL on any page that integrates the Creative SDK.
If you're testing on your dev machine from localhost, then you'll need to modify your hosts file and setup your own domain mapped to 127.0.0.1, then you'll need to configure a self-signed certificate on your server.
You may also want to check out How to use locally (from their Github repo) which has this wonderful gem:
openssl req -new -x509 -keyout server.pem -out server.pem -days 365 -nodes
Helpful Resources:
Here's how my test application was configured on Adobe I/O:
At the root, to create a self-signed cert, run:
openssl req -new -x509 -keyout server.pem -out server.pem -days 365 -nodes
Then, I've setup a simple python server that uses that self-signed cert server.pem created above:
# ./start.py
import BaseHTTPServer, SimpleHTTPServer
import ssl
httpd = BaseHTTPServer.HTTPServer(('localhost', 4443), SimpleHTTPServer.SimpleHTTPRequestHandler)
httpd.socket = ssl.wrap_socket (httpd.socket, certfile='server.pem', server_side=True)
httpd.serve_forever()
Started my server
python ./start.py
Important Note: You will get an 200 response with the following payload: {"error":"invalid_credentials"} on that second call. As long as you don't get a console error, your web app is ready.
As per the documentation, I added a button with csdk-login to test the User Auth UI api.
File structure:
/app
├── config.js <-- my clientId config
├── index.html
├── index.js
├── server.pem <-- my self-signed cert
└── start.py <-- my server
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Technophobia: SDK Getting Started</title>
</head>
<body>
<h1>Adobe Creative SDK</h1>
<p>Look at the console</p>
<button id="csdk-login">Log in to Creative Cloud</button>
<script type="text/javascript" src="https://cdn-creativesdk.adobe.io/v1/csdk.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
JS:
/* 1) Initialize the AdobeCreativeSDK object */
AdobeCreativeSDK.init({
/* 2) Add your Client ID (API Key) */
clientID: CONFIG.CSDK_CLIENT_ID, //
API: ["Asset"],
onError: function(error) {
/* 3) Handle any global or config errors */
if (error.type === AdobeCreativeSDK.ErrorTypes.AUTHENTICATION) {
console.log('You must be logged in to use the Creative SDK');
} else if (error.type === AdobeCreativeSDK.ErrorTypes.GLOBAL_CONFIGURATION) {
console.log('Please check your configuration');
} else if (error.type === AdobeCreativeSDK.ErrorTypes.SERVER_ERROR) {
console.log('Oops, something went wrong');
}
}
});
/* 1) Add a click handler to a button that calls a helper function */
document.getElementById("csdk-login").addEventListener('click', handleCsdkLogin, false);
/* 2) Make a helper function */
function handleCsdkLogin() {
/* 3) Get auth status */
AdobeCreativeSDK.getAuthStatus(function(csdkAuth) {
/* 4) Handle auth based on status */
if (csdkAuth.isAuthorized) {
// The user is logged in and has authorized your site.
console.log('Logged in!');
} else {
// Trigger a login
AdobeCreativeSDK.login(handleCsdkLogin);
}
});
}
