Skip to content

GoogleChromeLabs/protected-audience-demo

Repository files navigation

Protected Audience demo

Introduction

This demo shows the simple usage of the Protected Audience API. In this demo, there are 4 actors involved in the process: advertiser, publisher, DSP, and SSP. Each actors interact with one another to render a retargeted ads to the user.

Local development

Setup HTTPS

To run the Protected Audience demo locally, the resources from DSP/SSP must be served over HTTPS. Unfortunately, Firebase emulator does not support HTTPS localhost. Therefore, we will setup a reverse proxy with nginx to serve DSP/SSP resources over HTTPS.

Generate the certs with mkcert

  1. Install mkcert by following the instructions for your operating system.
  2. Run mkcert -install.
  3. Create a folder to store the certificates in. In this example, we will use mkdir ~/certs.
  4. Navigate to the certificate folder: cd ~/certs.
  5. Run mkcert localhost.

For an in-depth explanation of this section, please see the "How to use HTTPS for local development" article.

Setup reverse proxy with nginx

  1. Install nginx (Mac, Linux, Windows).
  2. Find the nginx configuration file location based on your operating system (If you used homebrew on Mac, it is under /Users/[USER-NAME]/homebrew/etc/nginx/nginx.conf).
  3. If you don't have an existing configurations set up in nginx, erase the existing content in nginx.conf and copy-paste the following block into the config. Replace [USER-NAME] with the path that your certificate is stored in:
http {
  # DSP proxy
  server {
    listen  4437 ssl;
    ssl_certificate  /Users/[USER-NAME]/certs/localhost.pem;
    ssl_certificate_key /Users/[USER-NAME]/certs/localhost-key.pem;

    location / {
      proxy_set_header        Host $host;
      proxy_set_header        X-Real-IP $remote_addr;
      proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header        X-Forwarded-Proto $scheme;

      proxy_pass          http://localhost:3007/;
      proxy_read_timeout  90;
    }
  }

  # SSP proxy
  server {
    listen  4438 ssl;
    ssl_certificate  /Users/[USER-NAME]/certs/localhost.pem;
    ssl_certificate_key /Users/[USER-NAME]/certs/localhost-key.pem;

    location / {
      proxy_set_header        Host $host;
      proxy_set_header        X-Real-IP $remote_addr;
      proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header        X-Forwarded-Proto $scheme;

      proxy_pass          http://localhost:3008;
      proxy_read_timeout  90;
    }
  }
}
  1. Stop the nginx server with nginx -s stop
  2. Restart the nginx server with nginx

The above nginx configuration proxies https://localhost:4437 to http://localhost:3007 (DSP server) and https://localhost:4438 to http://localhost:3008 (SSP server).

Setup Firebase

Setup repository

  • git clone https://github.com/googlechromelabs/protected-audience-demo
  • cd protected-audience-demo
  • npm install

Start emulator

npm run dev

And visit http://localhost:3000 for the main page

Deploy code

npm run deploy

Key files

Hostnames

Production

Local

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •