Setting up SSL and HTTPS for local development

Posted on Sunday, December 11th, 2016 by Ash Ryan
Category: Web

http in a web browser

The Creative SDK for Web was recently updated with a number of new components, including User Auth UI, Asset Browser UI, and Creative Cloud Files API.

The new components all require that any website integrating the SDK utilizes SSL. Given the increasing emphasis on SSL, many production sites already serve content via HTTPS.

However, setting up an SSL certificate and HTTPS server for local development is a process that many developers might not be familiar with.

Since SSL is also required locally for the Creative SDK, our team has created a guide to help you get set up quickly with a self-signed SSL certificate and a simple local HTTPS server.

Contents

  1. Set up your local URL
  2. Set up SSL
  3. Start a local HTTPS server
  4. Access the site locally
  5. Try the Creative SDK for Web

1. Set up your local URL

The Adobe I/O Console

All Creative SDK integrations require registration on the Adobe I/O Console. Part of setting up a Web integration on the Adobe I/O Console is registering your redirect URLs.

In addition to any live production URLs you register, be sure to also register any local URL that you intend to use. (localhost and IP addresses are not allowed.)

For this example, let’s assume you register:

https://local\.mysite\.com

(The backslashes “\” in the URL above are Java regex to ensure that the periods are pattern-matched properly.)

Your hosts file

The hostname of the local URL you registered with the Adobe I/O Console above will need to be registered in your local hosts file in order to direct that hostname to your localhost IP address.

If you are on a Mac, your hosts file is likely at /etc/hosts. If you are on Windows, you can likely find this file at C:\Windows\System32\Drivers\etc\hosts.

Open your hosts file up in your text editor of choice:

$ nano /etc/hosts

Then, in your hosts file, add a line with your localhost IP address, followed by the local hostname that you registered on the Adobe I/O Console.

For example:

127.0.0.1   local.mysite.com

Save the changes and your local hostname is ready to go.

2. Set up SSL

If you do not already have an SSL certificate, you will need to create one. One way to create one is by installing the OpenSSL CLI.

After installation, you can generate your own SSL certificate like this:

$ openssl req -new -x509 -keyout server.pem -out server.pem -days 365 -nodes

Note: when you enter this command, you will be asked a number of questions. For this use case, the only crucial question here is the “Common Name”. Be sure the Common Name is the same as the local hostname you added to your hosts file in the step above (e.g., local.mysite.com).

This will add a server.pem file to your current directory.

Since this is a self-signed certificate, browsers will not trust it, but it will be fine for our local development needs.

3. Start a local HTTPS server

There are many ways to accomplish this.

If you have Python installed (all Macs do by default), you can create a simple HTTPS server in just a few lines of code with Python.

For example, create a file called https-server.py, then add the following code:

import BaseHTTPServer, SimpleHTTPServer
import ssl

import sys

DOMAIN = sys.argv[1];
PORT = int(sys.argv[2]);

httpd = BaseHTTPServer.HTTPServer((DOMAIN, PORT), SimpleHTTPServer.SimpleHTTPRequestHandler)
httpd.socket = ssl.wrap_socket (httpd.socket, certfile='server.pem', server_side=True)
httpd.serve_forever()

You can run this HTTPS server from the command line like this:

$ python https-server.py [domain] [port]

(Hat tip to piware.de for the code the server above is based on.)

Note that using Python is just one example. You could also make an HTTPS server with NodeJS or your language of choice.

4. Access the site locally

Using our examples from above, if you started the HTTPS server with domain local.mysite.com on port 8080, you will be able to access the site locally by going to this URL:

https://local.mysite.com:8080

Note that your browser will likely warn you that the site is insecure because the SSL certificate is self-signed. This warning is expected, and you can ignore it for local development.

5. Try the Creative SDK for Web

Now that you are set up with a local HTTPS server and self-signed SSL certificate, you’re ready to try out our latest Creative SDK components for Web, like User Auth UI, Asset Browser UI, Creative Cloud Files API, and more.

Have a look at our developer guides or check out our Getting Started for Web repos on GitHub.

PhoneGap Plugin Roundup

Posted on Tuesday, September 20th, 2016 by Ash Ryan
Categories: Android, iOS, Web
Tags: Client Auth, Image Editor UI, PhoneGap, Send To Desktop API, User Auth UI

PhoneGap Logo

We’ve had a lot of PhoneGap news recently, with the release of our first 4 PhoneGap plugins and 2 PhoneGap templates.

PhoneGap makes it possible for Web developers to build apps for iOS and Android using the languages they know and love: HTML, CSS, and JavaScript. Our PhoneGap plugins are also compatible with Cordova and Ionic.

Creative SDK Image Editor PhoneGap template

Image Editor UI PhoneGap plugin

Creative SDK Send To Desktop API PhoneGap plugin

Send To Desktop API PhoneGap plugin

Learn more

For an overview of these new offerings, head over to the PhoneGap blog, where they talk about the Image Editor UI plugin, Send To Desktop API plugin, and more!

To see all of the Creative SDK PhoneGap plugins and templates, also be sure to check out the Plugins section of the Creative SDK GitHub page.

If there’s another Creative SDK PhoneGap plugin you’d like to see, let us know in the comments!

PhoneGap template for the Creative SDK Send To Desktop API

Posted on Wednesday, September 7th, 2016 by Ash Ryan
Categories: Android, iOS, Web
Tags: Client Auth, Image Editor UI, PhoneGap, Send To Desktop API, User Auth UI

PhoneGap Logo

Hi Web developers! We’ve had a lot of PhoneGap + Creative SDK announcements for you recently. We announced our first PhoneGap plugins, a PhoneGap template for the Image Editor, and another batch of PhoneGap plugins.

As a companion to that second batch of plugins, today we are releasing a PhoneGap template for the Creative SDK Send To Desktop API.

A template is a great way to start learning about a PhoneGap plugin. Templates are essentially sample apps that you can download via NPM, build from your command line, and run on your device (these plugins support iOS and Android).

When you try out the Creative SDK Send To Desktop PhoneGap template, without writing any code, you’ll have a sample app for your reference that looks like this:

Creative SDK Send To Desktop API PhoneGap plugin

In the template app, you can:

Try it out

You can get started with the Creative SDK Send To Desktop template for PhoneGap by checking out the repo on GitHub.

The README covers everything you need to get going, including prerequisites, setup steps, and files to check for sample code.

Learn more

After you’ve tried the template and you’re ready to learn more about the plugins that make the template possible, check out these GitHub repos:

The READMEs for the plugin repos on GitHub contain Setup and API guides, as well as sample code, to help you get started quickly.

If there’s another Creative SDK PhoneGap plugin you’d like to see, let us know in the comments!

New PhoneGap plugins: Send To Desktop API and User Auth UI

Posted on Tuesday, August 30th, 2016 by Ash Ryan
Categories: Android, iOS, Web
Tags: Client Auth, Image Editor UI, PhoneGap, Send To Desktop API, User Auth UI

PhoneGap Logo

Hi Web developers! Joining our first two PhoneGap plugins, we’re excited to announce a new batch of plugins that let you use the Creative SDK in your PhoneGap app.

Adobe PhoneGap lets you easily create apps using the web technologies you know and love: HTML, CSS, and JavaScript.

With our growing catalogue of PhoneGap plugins, you can build apps using the Creative SDK native components for iOS and Android without writing a single line of Objective-C, Swift, or Java.

About the plugins

Our newest plugins make available the Creative SDK Send To Desktop API and User Auth UI components.

With the Send To Desktop API plugin, your users can send images from your mobile app and have them open automatically in Photoshop, Illustrator, or InDesign on the desktop.

For the user, this interaction feels like magic; for the developer, it’s a single function call.

Send To Desktop API

Send To Desktop API: Send images from your app to Photoshop, Illustrator, or InDesign

The Send To Desktop workflow makes use of the user’s Adobe Creative Cloud account, which you can access via the User Auth UI plugin.

All of the heavy lifting for User Auth login and logout is handled by the plugin, making the integration quick and simple to set up.

Get the plugins

Check out our PhoneGap plugins on GitHub:

  • Client Auth: The starting point for all Creative SDK integrations
  • Image Editor UI: Powerful photo editing for mobile apps
  • New! User Auth UI: Let users log in to their Adobe Creative Cloud accounts, right from within your app
  • New! Send To Desktop API: Magically send images from mobile to Photoshop, Illustrator, or InDesign

The READMEs for the plugin repos contain Setup and API guides, as well as sample code, to help you get started quickly.

We’ll have more Creative SDK + PhoneGap news for you soon. As always, feel free to reach out if you have any requests related to our PhoneGap plugins.

(Oh, and while you’re digging in, try out our PhoneGap template for the Image Editor!)

PhoneGap template for the Creative SDK Image Editor

Posted on Wednesday, August 24th, 2016 by Ash Ryan
Categories: Android, iOS, Web
Tags: Image Editor UI, PhoneGap

Hi Web developers! Last week we announced our first PhoneGap plugins for the Creative SDK.

As a companion to those plugins, today we are releasing a PhoneGap template for the Creative SDK Image Editor.

A template is a great way to start learning about a PhoneGap plugin. Templates are essentially sample apps that you can download via NPM, build from your command line, and run on your device (these plugins support iOS and Android).

When you try out the Creative SDK Image Editor PhoneGap template, without writing any code, you’ll have a sample app for your reference that looks like this:

Creative SDK Image Editor PhoneGap template

The buttons let you use the Creative SDK Image Editor to edit the photo on the screen or use the camera to take a new photo for editing.

Try it out

You can get started with the Creative SDK Image Editor template for PhoneGap by checking out the repo on GitHub.

The README covers everything you need to get going, including prerequisites, setup steps, and files to check for sample code.

Learn more

After you’ve tried the template and you’re ready to learn more about the plugins that make the template possible, check out these GitHub repos:

The READMEs for the plugin repos on GitHub contain Setup and API guides, as well as sample code, to help you get started quickly.

We’ll have more PhoneGap plugins to announce very soon. In the meantime, if there’s a Creative SDK PhoneGap plugin you’d like to see, let us know in the comments!

PhoneGap plugins for the Creative SDK

Posted on Friday, August 19th, 2016 by Ash Ryan
Categories: Android, iOS, Web
Tags: Client Auth, Image Editor UI, PhoneGap

PhoneGap Logo
(Update: you can also check out our latest batch of plugins after reading this article.)

Hi Web developers! We’re excited to announce our first PhoneGap plugins for the Creative SDK.

PhoneGap lets you easily create apps using the web technologies you know and love: HTML, CSS, and JavaScript.

We’ve been working in collaboration with the Adobe PhoneGap team to bring the power of the Creative SDK to even more developers with PhoneGap. Now, you can take advantage of the Creative SDK native components for iOS and Android without writing a single line of Objective-C, Swift, or Java.

Get the plugins

As of today, you can start using these Creative SDK PhoneGap plugins:

(Update: be sure to check out our latest batch of plugins too.)

The READMEs for the plugin repos contain Setup and API guides, as well as sample code, to help you get started quickly.

We have more PhoneGap plugins on the way. In the meantime, if you have a request for a PhoneGap plugin for a specific Creative SDK component, let us know in the comments!

Partner Spotlight: Cacoo

Posted on Monday, May 23rd, 2016 by Ash Ryan
Categories: Partner Spotlight, Web

Cacoo and the Adobe Creative SDK
The Creative SDK team is excited to announce a new integration of our Web beta SDK. Cacoo, made by Nulab Inc., is one of the first web apps to go live with the beta of the new Creative SDK Asset Browser UI component for Web.

Let’s have a look at how Cacoo integrates the Creative SDK Asset Browser UI component to offer Cacoo users access to their Creative Cloud assets directly from within the app.

(If you want to add the Asset Browser to your Web app, sign up for the beta program here!)

Contents

About Cacoo

Cacoo is an online diagramming tool that simplifies and enhances visual communication. It takes collaboration to the next level by allowing team members to edit the same diagram simultaneously, while discussing changes in real-time using its in-app messaging system.

Cacoo, by Nulab Inc.

Over 2 million users around the world use Cacoo as their online diagramming software for creating wireframes, flowcharts, mind maps, UML models, network diagrams, sitemaps and more.

About the Asset Browser UI component

One feature of the Creative SDK is the Asset Browser UI component, which lets your users browse and interact with the assets they have stored in the Creative Cloud, right from within your app:

Adobe Creative SDK Asset Browser UI for Web

Our iOS and Android SDKs already offer this component, and we are now rolling out a beta of the Asset Browser for Web to select partner developers. Cacoo is among the first to go live with the Asset Browser.

Cacoo’s Asset Browser integration

With the new Asset Browser integration, Cacoo users can now browse their Creative Cloud assets directly from within Cacoo. Users can then select the Creative Cloud image assets that they want to add to their Cacoo diagramming project.

From there, Cacoo users can interact with the imported Creative Cloud asset just like any other image asset uploaded to Cacoo.

This short screencast demonstrates the simple and seamless user workflow:

Cacoo + Adobe Creative SDK screencast

You can learn more about Cacoo’s Creative SDK Asset Browser integration on the Nulab blog.

And you can sign up for the Asset Browser beta program for Web here.

Try the Creative SDK for iOS, Android, or Web today!

New Sample Repo for Web: Image Editor + Drag & Drop API

Posted on Monday, May 16th, 2016 by Ash Ryan
Category: Web
Tags: GitHub, Image Editor UI, Repo

Creative SDK Image Editor sample app repo with Drag and Drop API
Hi Web developers! We’re exited to announce a new sample repo that integrates both the Creative SDK Image Editor for Web and the HTML Drag and Drop API.

Even better, it features the first contributions from our GitHub community (more on that below).

Contents

Overview of the repo

This repo is a basic example written in jQuery. It integrates both the Creative SDK Image Editor and the HTML Drag and Drop API.

If you’re looking specifically for the Drag and Drop implementation, see the index.js file where we listen for Drag and Drop-related events:

// `dropArea` is a jQuery object for an HTML `div` element
dropArea.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
    if (e.preventDefault) e.preventDefault(); 
    if (e.stopPropagation) e.stopPropagation(); 
})
// ...
.on('drop', function(e) {

    // Get the dropped file
    var file = e.originalEvent.dataTransfer.files[0];

    validateFileType(file);

});

That .on('drop', ...) call is where the magic starts: we get the file and pass it to our own validateFileType() helper method.

Have a look at that helper method to see what happens from there.


Sidenote:

If you’re wondering what .originalEvent is in the code above: our event e in the callback function is a jQuery event. We have to go to the original JavaScript event to access the .dataTransfer property, where the dropped file lives.

jQuery events let us do this via the .originalEvent property. If this sample repo were written in vanilla JavaScript, you could write that line as e.dataTransfer.files[0].

You can read more about the jQuery event object in the jQuery docs.

Community contributions

We’d like to thank our first GitHub community contributors for the code they’ve submitted to this sample app!

We’ll post again pretty soon about how you can contribute to this sample app too. Stay tuned!

Try it live or fork the repo

You can try a live demo of this repo on its GitHub project page.

Want to fork the repo and try it yourself? Head over to GitHub to fork, and be sure to read the readme for setup instructions!

More repos

Want more repos for Web, iOS, and Android?

We offer more sample repos for all three platforms. Have a look at our GitHub organization’s table of contents.

Head on over to GitHub to fork a repo and try out our Creative SDK sample repos.

Web sample repo: Image Editor with High Resolution

Posted on Tuesday, May 10th, 2016 by Ash Ryan
Category: Web
Tags: GitHub, Image Editor UI, Repo

High Resolution sample repo for the Creative SDK

Hi Web developers! We’re happy to announce a new sample repo that demonstrates how to use the Creative SDK Image Editor with High Resolution image editing.

This repo joins our standard resolution sample repos for jQuery and for Angular/Express.

Contents

Background

The Creative SDK Image Editor UI component for Web offers standard resolution image editing out of the box, with no additional permissions required.

For High Resolution image editing, there are a couple of extra steps involved:

  1. Approval is required from the Creative SDK team

    For more information about getting approval, see the High Resolution image editing guide

  2. Setup for High Resolution is required in your code

For that second step, our new Angular/Express with High Resolution sample repo will be helpful when viewed in conjunction with our High Resolution image editing guide.

Points to check

Have a look at the code in our sample repo to see one way to set up High Resolution image editing.

Client-side setup

In this repo, the client-side code hits our server’s Creative SDK authentication endpoint. The client knows what endpoint to hit because we have provided the following key/value pair to our Aviary.Feather() configuration object:

authenticationURL: "/api/auth/creativesdkAuthObj"

Also note that for High Resolution, we use the onSaveHiRes property in the Aviary.Feather() configuration object. What you do in this function is completely up to your app’s needs.

Lastly, note that in our $scope.imageEditor.launch() call, we pass both url and hiresUrl key/value pairs in our configuration object. These can point to the same place, but both key/value pairs must be present.

For sample code, see: /client/pre-build/home/home.controller.js

Server-side setup

On the server, we have created an API endpoint at /api/auth/creativesdkAuthObj. The location of this endpoint is arbitrary, but the object it returns is crucial for High Resolution editing.

This endpoint returns the value of getAuthObj(), where getAuthObj() is a helper method we created to set up our authentication object. The Creative SDK uses this object to authenticate the client for High Resolution image editing.

Ulitimately, the authentication object returned from the /api/auth/creativesdkAuthObj endpoint looks like this:

{
    apiKey: <key>,
    salt: <salt>,
    timestamp: <timestamp>,
    encryptionMethod: <method>,
    signature: <signature>
}

Everything in angle brackets (< >) above should be replaced with real values, as we do in our sample repo.

For sample code, see: /server/api/auth/auth.controller.js

Getting started

Be sure to follow the steps in the readme to get set up.

You will need Nodejs and NPM installed to run the app.


Not a web developer? We offer Getting Started sample repos for mobile platforms as well. Have a look at our sample repos for iOS and for Android on GitHub.

Head on over to GitHub to fork a repo and try out our Creative SDK sample repos.

Angular/Express Sample Repo for Web

Posted on Tuesday, April 19th, 2016 by Ash Ryan
Category: Web
Tags: GitHub, Image Editor UI, Repo

Angular/Express sample repo for the Creative SDK

Hi Web developers! Last week we announced a new sample GitHub repo for the Creative SDK Image Editor.

This first repo is meant to be a very basic example of how to launch and get results from the Image Editor component, and is written in jQuery for maximum code readability for the widest range of web developers.

Joining the jQuery sample repo is a new Angular/Express sample repo.

Points to check

This repo was created to show you a couple of things that we often get questions about:

  1. How to use the Image Editor within the Angular framework

    See:

  2. One way to pull images from your Express server for use in the app UI and Image Editor

    See:

Getting started

Be sure to follow the steps in the readme to get set up.

You will need Nodejs and NPM installed to run the app.


Not a web developer? We offer Getting Started sample repos for mobile platforms as well. Have a look at our sample repos for iOS and for Android on GitHub.

Head on over to GitHub to fork a repo and try out our Creative SDK sample repos.