疑难解答:
您是否在控制台中看到类似的内容?
XMLHttpRequest 无法加载 https://adobeid-na1.services.adobe.com/ims/check/v4/token。请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'https://your.domain.com' 因此不允许访问。
那么您可能没有有效的 SSL 证书。
来自文档:
来自 Adobe 的Getting started with the Creative SDK for Web:
如果您因为以下原因而收到 XMLHttpRequest 错误
'Access-Control-Allow-Origin',您的 SSL 可能存在问题
设置(如本指南的“先决条件”部分所述,SSL 是
必填)。
这是先决条件部分中所述的内容 [强调]:
先决条件
在使用 Creative SDK 之前,您必须先注册您的
应用程序并获取客户端 ID(API 密钥)和客户端密钥值。为了
详细信息,请参阅本指南的“注册您的应用程序”部分。
-
需要以下软件:
- 支持的浏览器:Chrome 53+、Safari 9+、Firefox 45+、Edge、IE11+
- 需要 SSL:您的网站必须在任何集成了 Creative SDK 的页面上支持 SSL。
可能的解决方案:
如果您在 localhost 的开发机器上进行测试,那么您需要修改您的 hosts 文件并设置您自己的域映射到 127.0.0.1,然后您需要配置一个自您的服务器上的签名证书。
您可能还想查看How to use locally(来自他们的 Github 存储库),其中包含这个奇妙的宝石:
openssl req -new -x509 -keyout server.pem -out server.pem -days 365 -nodes
有用的资源:
我是如何工作的:
1。 Adobe I/O 设置:
这是我的测试应用程序在 Adobe I/O 上的配置方式:
2。本地 HTTP 服务器 (SSL)
在根目录下,要创建自签名证书,请运行:
openssl req -new -x509 -keyout server.pem -out server.pem -days 365 -nodes
然后,我设置了一个简单的 python 服务器,它使用上面创建的自签名证书 server.pem:
# ./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()
启动我的服务器
python ./start.py
重要提示:您将在第二次调用时收到带有以下负载的 200 响应:{"error":"invalid_credentials"}。只要您没有收到控制台错误,您的网络应用程序就已准备就绪。
根据文档,我添加了一个带有 csdk-login 的按钮来测试用户身份验证 UI api。
4。完整的工作代码
文件结构:
/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);
}
});
}