Setup Google Login and Photos

overview & purpose let your customers use google account to log in to your onprintshop store login made simple with google your customers will not have to remember individual usernames and passwords for each account also, google login gives easy access to your users’ data; this enables you to request access to additional info about someone using your website also, integrate google photos for your print store the google login feature comes in handy with the google photos feature how to integrate follow the below steps to configure google login and photos in your domain 1 create a new project 1 create a new project visit google's developers console log in with your google account after successful login, create a new project from a new project button enter your project name and location to create a project after creating the project, the google developers page will lead you to your project dashboard click on the go to apis overview 2 enable apis and services 2 enable apis and services the apis overview button will redirect you to your project dashboard click on the enable apis and services button next, enable the photos library api similarly, enable the google photos picker api as well 3 create credentials 3 create credentials to use google login in your store, you may need credentials click on the create credentials the create credentials page will appear credential type credential type the first step of creating credentials is the selection of the type of api you are using, this is because different apis use different auth platforms, and some credentials can be restricted for certain apis in this case, choose the in this case, choose the photos library api select the type of data you are willing to access i e select the type of data you are willing to access i e user data now, click the now, click the next button and set up an oauth consent screen oauth consent screen and app registration oauth consent screen and app registration the oauth consent screen will appear fill up the consent screen, enter your application name, application logo, user support email, developer contact information and click on the save and continue the next screen of scopes will appear, you can skip this portion and click on save and continue oauth client id the oauth client id screen will appear select application type as – ‘web application’ enter your store domain in authorized javascript origin in authorized redirect uris enter the url in the following manner redirect uri for google login http //www \<yourdomainname> com/user registration php redirect uri for google photos http //www \<yourdomainname> com/studio/services/images php redirect uri for google drive http //www \<yourdomainname> com/admin/configuration external service action php note certain scopes are unavailable (i e are labeled with a lock sign) because usage of these scopes is restricted to projects using https urls only to continue, edit your oauth clients and remove non https urls from the credentials page click on the create the next screen to download the credential information will appear click on download to get the credential information in json format click on the done button if you got only the client id as shown above then, return to the credentials page here, you’ll find your oauth 2 0 client ids click on the pencil like icon to get the secret key copy the client id and client secret key to configure into admin panel edit app registration once you are done with creating the app, it is time to add some more details for this, click on the oauth consent screen option from the left panel and then, click on the edit app icon this will lead you to the edit app registration screen here, you will see some of the fields pre filled as per the details we configured in the create credentials process add the details to the remaining fields enter the website domain for domain authorization, such as the website domain, homepage link, privacy policy page link, and terms of services link enter developer contact information, if not added this email address is entirely for google to notify you about the changes to your project when finished, click on save and continue the next step is to define the scopes click on the add or remove scopes button this will list all the scopes for enabled api select the following scopes scope with description see selected photos and videos from google photos photos library api with the description as – view your google photos library in the next step, add test users till the time the publishing status is set as testing, only these test users will be able to access your app click on the +add users button to add a test user enter the email id of the user and click on the add button to complete the process publish app to publish the app, you need to take the action from the oauth consent screen click on the publish app and then click on the confirm button from the pop up 4 admin panel configuration 4 admin panel configuration for the configuration of app in the admin panel, go to the admin >> store configuration >> external service settings >> social sharing >> google >> action menu >> edit option select the status for the login and studio enter the client id and client secret key save the settings note if you have entered the redirect uris for google drive as shown in step 5, then you can enter these client id and client secret key in external service settings >> social sharing >> cloud storage tab >> enable google drive >> action menu >> ‘edit’ , and follow the steps given here https //help onprintshop com/setup google drive 5 apply for verification 5 apply for verification in google developers, go to oauth consent screen >> prepare for verification here, for the sensitive scope, you would need to add justification this should include how you will use the app permission and why you need this scope use sample content – we have created this application for the “\<your website link>" website using the google photos application our end users (i e the customers looking to order printing products) can connect their google photos account and use their images for product designing and printing purposes steps are stated below go to \<your website link> trigger top menu “ products ” choose a product from e g standard business cards scroll down the product page and choose ‘ custom design ’ this will redirect you to the designer studio go to images tab (left panel) >> image gallery click on the google photos button click on the connect log in to your google account grant necessary permission to \<your website name> to view the google photos library the images associated with google photos will load into the studio select an image to complete the design and continue proceed to the cart page next, you need to enter the screencast video link if your application isn’t verified then google displays a safety error to your customers, as shown below – with this error, your application may work for a few days but it is advisable to get the application verified to avoid any further inconveniences screencast video steps – login to your print store with any customer’s credentials start recording navigate to any product with a custom design option, say standard business card choose custom design in the designer studio, go to the images tab (left panel) >> image gallery click on the google photos button click the connect maximize the new chrome window the client id should be visible in the address bar log in to the google account make sure two permission screens to grant your application the necessary permissions are visible after successful login, make sure the images from the google account are visible select one image to create a design proceed to the cart page stop the recording upload this video publicly from your youtube channel