Google Photos

Google has deprecated the Picasa API with effect from January 2019. This means that your Photonic galleries using Picasa as a source will no longer work. Please switch them over to Google Photos.

Using Photonic with simple parameters the gallery short-code / block can now be used to display albums and photos from Google Photos:

The main switch for Google Photos is the type parameter. You also need to have a view specified as well:

 [gallery type='google' view='abc'] 

You can also control various skinning aspects of how the thumbnails are displayed.

Steps to Make Google Photos Work (🔗)

The following high-level steps are required to get Google Photos working on your site:

  1. Obtain a Client ID
    In an ideal world this wouldn’t be required. However, Google enforces a 10,000 call cap on Google Photos API calls associated with each API key. Given Photonic’s popularity it is conceivable that more than 500 people use Photonic for Google Photos alone. If each person’s pages get visited around 20 times each day, across all users Photonic will quickly hit the daily cap of 10,000 requests. This makes it impractical for me to bundle my client id in the plugin, as people will start seeing errors on pages once the cap is hit.

    I am working with Google to get a higher threshold for Photonic. In the meanwhile, nebulous though this is, you can get a client id using the following steps:

    1. Create a project
    2. Create a client id
    3. Enable the client id for Google Photos
  2. Authenticate
    This is a must for Google Photos as unauthenticated calls are not supported

    1. In most cases you will be able to authenticate as per the documentation.
    2. However, there are documented instances of server configurations and plugin conflicts that prevent the authentication bundled with Photonic from working. In such cases try the workaround.
  3. Start creating your galleries

Creating a Google Project (🔗)

If you do not have a Google API project set up in the API Manager, follow these steps:

  1. When you log into the API Manager, your screen should look similar to this:
    Do you have a dropdown for projects at the top?

    If you already have a listing of projects at the top, proceed to create a client ID. If not, read on.
  2. Start off by clicking on the project selection link:
    Click on the project selection link
  3. Now, click on the “+” icon:
    Add a project
  4. On the resultant screen fill out a project name and click “Create”
    Create the project

That’s it. Your project will now appear in the project selection dropdown.

Creating a Client ID (🔗)

The Client ID is mandatory for Google. To get one:

  1. Go to the API Manager. You will see a screen like this:
    All your API Keys are displayed in the API Manager
  2. Note that the above screen will show up if you have an API Project already. If you don’t, you can create one as per the previous section.
  3. Now you need to get your client ID. For this, click on the “Create Credentials” button, and select “OAuth client ID”:
    You will need to create an OAuth Client ID
  4. In the resultant screen, pick the option for “Web application”, give it a “Name”, then fill out the “Authorised Redirect URIs”. You can get the Redirect URIs for your site from Photonic → Settings → Google Photos → Google Photos Settings → Google Client ID. You first put in one, hit enter, then put in the next and hit enter again.
    Enter the details in the highlighted sections.
  5. Once you are satisfied with your app, click “Create”. Google immediately gives you the credentials:
    The screen shows you the Client ID and the Client Secret
  6. Copy the information from the above to Photonic → Settings → Google Photos → Google Photos Settings → Google Client ID and Photonic → Settings → Google Photos → Google Photos Settings → Google Client Secret.

Enabling the Client ID for Google Photos (🔗)

Once you have obtained the Client ID you have to follow these steps to make sure that you are able to use it with Google Photos.

  1. First, make sure that the “Redirect URIs” listed under Photonic → Settings → Google Photos → Google Photos Settings → Google Client ID are present in your API Key settings in Google’s API Console. Instructions are provided above.
  2. Navigate to the Dashboard of your API Manager and select your API project. If you don’t have a project, the instructions are provided above. You should see something like this:
    Your permitted APIs are listed on this screen
  3. Do you see “Photos Library API” listed in the lower section above? If not, click on the link up top that says “+ ENABLE APIS AND SERVICES”. You should see something like this come up:
    You can search for APIs to add to your account
  4. In the search box above type in “photos”. The “Photos Library API” will now show up. Click on it:
    You can click on the “Photos Library API” for the next steps.
  5. You will be taken to a page with details about the API. Click on the link to enable it:
    Click on the button to “ENABLE” the API
  6. The API will be added and you will be taken to a page with statistics for it. You can go back to the “Dashboard” now:
    The API is added. You can go back to the dashboard.
  7. Your dashboard will show the new API now available. Your Client ID is ready for use!
    All is well!

Authentication (🔗)

To set up authentication you will need to do the following:

  1. The first step requires you to set the Google Client ID and Google Client Secret at Photonic → Settings → Google Photos → Google Photos Settings.
  2. Next, head over to Photonic → Authentication → Google Photos, then start the authentication:
    Click on “Authenticate”
  3. You will be taken to a screen on Google that will ask you to authorize an account. Pick the account associated with your photos:
    Pick the account that has your photos

    Occasionally you are shown a warning screen at this point:
    Warning Screen – Click on “Advanced”

    Once you click on “Advanced” you are given an option to proceed, which you can choose:
    Proceed
  4. You will be shown what permissions are requested by your API key. Note that for Picasa authentication only the first one is shown. Google Photos requires the two additional ones. You can allow access to the apps:
    Photonic needs access to your photo library to display information. Click “Allow” to proceed.
  5. You will be taken back to Photonic’s Authentication screen, where you can now obtain the “Refresh Token”:
    The “Authenticate” step is done, and the “Obtain Token” step is now activated.
  6. Clicking on “Obtain Token” will show you the token, which you can now “Save”:
    Clicking “Save Token” will take you to the Settings Page for Google, where the “Refresh Token” is set

With that your authentication is complete. Your setup is now good for use!

Authentication Workaround (🔗)

In some cases certain other plugins can cause conflicts with Photonic’s authentication. Typically such errors are caused by security plugins:

  • Error code 401:
    401. That’s an error.

    Error: invalid_client

    The OAuth client was not found.
    Request Details

    That’s all we know.

  • Error code 403, typically caused by some security plugins that disable accessing wp-admin/admin.php from external sources. Such errors show up as:
    Forbidden
    You don’t have permission to access /wp-admin/admin.php on this server.
  • Error code 412:
    Your request got filtered out due to possible security issues.

    One or more things in your request were suspicious (defective request header, invalid cookies, bad parameters)

    If you think you did nothing wrong:

    • try again with a different browser
    • avoid any evil characters inside the request url
    • If you are the owner of the website, you can consider revising the rules of the mod_security module or turning it off from your Web Hosting Control Panel.
  • Error code 406, or Apache mod_security errors, such as this:
    Not Acceptable!
    An appropriate representation of the requested resource could not be found on this server. This error was generated by Mod_Security.

These are beyond the control of Photonic to fix, as different web-hosting configurations and security plugins have different generic controls in place and often capture false positives. To get around such conflicts there is a workaround that you can follow:

  1. In step 4 to create a client ID, add an additional “Authorised Redirect URI”:
    • https://developers.google.com/oauthplayground
  2. Now go to the Google OAuth2 Playground. This is a site hosted by Google to help you do your validations. Click on the Settings icon:
    Click on the Settings icon in the OAuth Playground
  3. Select the option to “Use your own OAuth credentials”, and provide the “OAuth Client ID” and “OAuth Client secret” that you obtained in the step to create a client ID. Click “Close” once you are done:
    Provide your own credentials
  4. On the left, under the section that says “Select & authorize APIs”, you will see a box that says “Input your own scopes”. Put in https://www.googleapis.com/auth/photoslibrary.readonly https://www.googleapis.com/auth/photoslibrary.sharing. Note that there are two URLs, separated by a space. Click “Authorize APIs”.
    Add scopes and authorize APIs
  5. You will be taken to the account selection screen, as you would see in the regular step 3 of the authentication flow. You can ignore any warnings that show up (since you will be authorizing your own API key to access your own pages).
  6. You will then be brought back to the OAuth 2.0 Playground. You will see and authorization code and an option to “Exchange authorization code for tokens”. Click on it:
    Exchange the code for tokens
  7. You will finally see Google provide you with a “Refresh token” and an “Access token”. Copy the “Refresh token”:
    Copy your Refresh token
  8. Go to Photonic → Settings → Google Photos → Google Photos Settings → Refresh Token (for Back-end / Server-side Authentication) and paste what you copied, then “Save”:
    Save the Refresh Token

Feel free to look at the Photos and Albums pages for examples on usage.